Iphone mediaquery

Carmoruda · Jan 8, 2024 · 2c48e95 · 2c48e95
1 parent ad83535
commit 2c48e95
Show file tree

Hide file tree

Showing 13 changed files with 213 additions and 61 deletions.
diff --git a/css/common.css b/css/common.css
@@ -287,6 +287,49 @@ body {
         font-weight: 600;
     }
 }
+
+/* --- Redmi 9 and iPhone 8 --- */
+@media (max-width: 575.98px) {
+    .logo-foto {
+        height: 50px !important;
+        width: 120px !important;
+    }
+
+    .footer-foto {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .titles-frame {
+        margin: 0;
+        text-align: center;
+    }
+
+    .site-footer {
+        padding: 45px 2rem 20px;
+        text-align: center !important;
+    }
+
+    .site-footer hr {
+        width: auto;
+    }
+
+    .header-banner {
+        height: 90px;
+    }
+
+    .header {
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+    }
+
+    #reject-button {
+        margin-bottom: 1rem;
+    }
+}
+
 @media (min-width: 768px) and (max-width: 991.98px) {
     .row-nav-item {
         padding-right: 0;

diff --git a/css/history.css b/css/history.css
@@ -1,8 +1,8 @@
-.portfolio-menu {
+.gallery-menu {
     text-align: center;
 }
 
-.portfolio-menu ul li {
+.gallery-menu ul li {
     display: inline-block;
     margin: 0;
     list-style: none;
@@ -15,11 +15,41 @@
     transition: all 0.5s ease;
 }
 
-.portfolio-item .item {
+.gallery-item .item {
     float: left;
     margin: calc(var(--bs-gutter-x) * 0.5) 0;
 }
 
-.portfolio-item .videos {
+.gallery-item .videos {
     margin-right: calc(var(--bs-gutter-x) * 0.95);
 }
+
+@media (max-width: 575.98px) {
+    .youtube-video {
+        width: auto;
+        height: 200px;
+        margin-left: 2rem;
+    }
+
+    .gallery-frame {
+        margin-top: 2rem;
+    }
+
+    .planeswalkers-button {
+        margin-top: 0.5rem !important;
+    }
+
+    ul {
+        padding: 0;
+    }
+
+    h2 {
+        text-align: center;
+        font-weight: 600;
+        text-transform: uppercase;
+    }
+
+    h1 {
+        font-size: 1.5rem;
+    }
+}
diff --git a/css/howtoplay.css b/css/howtoplay.css
@@ -7,13 +7,6 @@
     margin-bottom: 4rem;
 }
 
-@media (max-width: 1300px) {
-    .how-to-play-text-frame,
-    .card-type-frame {
-        max-width: 80%;
-    }
-}
-
 .youtube-video {
     box-shadow: 0px 0px 6px 6px rgba(207, 49, 32, 0.4);
     float: left;
@@ -51,3 +44,46 @@
 .land-img {
     border-radius: 4%;
 }
+
+/* --- MEDIA QUERIES --- */
+
+/* --- Redmi 9 and iPhone 8 --- */
+@media (max-width: 575.98px) {
+    .youtube-video {
+        width: auto;
+        height: 200px;
+        margin-left: 0.5rem;
+    }
+
+    .spell-img {
+        padding: 0;
+        margin-top: 1rem;
+    }
+
+    .rules-img {
+        height: 15rem;
+    }
+
+    .spell-img,
+    .rules-img {
+        display: block;
+        margin: 2rem auto;
+    }
+
+    .rules-row {
+        margin-bottom: 2rem;
+    }
+
+    h3 {
+        text-align: center;
+        font-weight: 600;
+        text-transform: uppercase;
+    }
+}
+
+@media (max-width: 1300px) {
+    .how-to-play-text-frame,
+    .card-type-frame {
+        max-width: 80%;
+    }
+}
diff --git a/css/index.css b/css/index.css
@@ -278,6 +278,38 @@
     margin: 0 0.5rem;
 }
 
+/* --- MEDIA QUERIES --- */
+
+/* --- Redmi 9 and iPhone 8 --- */
+@media (max-width: 575.98px) {
+    .img-carousel-1 {
+        content: url(../media/home/carousel/Extra-Small-jose-vega-cinderella-setpiece-2021-8-4-jv.jpeg);
+    }
+
+    .img-carousel-2 {
+        content: url(../media/home/carousel/Extra-Small-josu-solano-430520-floodedcavern-final-v3.jpeg);
+    }
+
+    .img-carousel-3 {
+        content: url(../media/home/carousel/Extra-Small-david-frasheski-lotrmountainsright.jpeg);
+    }
+
+    .welcome-text-frame {
+        padding: 4.75rem;
+    }
+
+    .sets-text-frame,
+    .universes-beyond-frame,
+    .game-formats-frame {
+        display: flex;
+        padding: 4.375rem 11.375rem;
+        padding-top: 0;
+        flex-direction: column;
+        align-items: center;
+        gap: 3.75rem;
+    }
+}
+
 @media (max-width: 1200px) {
     .universes-beyond-frame,
     .sets-text-frame,

diff --git a/html/history.html b/html/history.html
@@ -20,7 +20,7 @@
     <!-- Navigation bar -->
     <nav class="navbar navbar-web navbar-dark navbar-expand-lg">
         <div class="container-fluid">
-            <a class="navbar-brand" href="#">
+            <a class="navbar-brand" href="../index.html">
                 <img class="logo-foto img-fluid" src="../media/logo.png" alt="Magic the Gathering">
             </a>
 
@@ -77,12 +77,14 @@
 
     <!-- Introduction section -->
     <section class="introduction-section">
-        <hr class="header-line">
-        <div class="header-frame">
-            <h1 class="header-title text-center">Magic: The Gathering’s Lore</h1>
-            <img class="header-banner" src="../media/banners/How to play banner.png" />
+        <div class="header">
+            <hr class="header-line">
+            <div class="header-frame">
+                <h1 class="header-title text-center">Magic: The Gathering’s Lore</h1>
+                <img class="header-banner" src="../media/banners/How to play banner.png" />
+            </div>
+            <hr class="header-line">
         </div>
-        <hr class="header-line">
 
         <div class="introduction-frame">
             <p>Embark on a journey through the rich tapestry of Magic: The Gathering's lore.</p>
@@ -101,16 +103,17 @@ <h2 class="section-title text-center">
             </h2>
         </div>
 
-        <div class="container">
-            <div class="portfolio-menu mt-2 mb-4">
+        <div class="container gallery-frame">
+            <div class="gallery-menu mt-2 mb-4">
                 <ul>
                     <li class="btn btn-outline-dark active" data-filter="*">All</li>
                     <li class="btn btn-outline-dark" data-filter=".videos">Videos</li>
                     <li class="btn btn-outline-dark" data-filter=".planes">Planes</li>
-                    <li class="btn btn-outline-dark text" data-filter=".planeswalkers">Planeswalkers</li>
+                    <li class="btn btn-outline-dark planeswalkers-button" data-filter=".planeswalkers">Planeswalkers
+                    </li>
                 </ul>
             </div>
-            <div class="portfolio-item row">
+            <div class="gallery-item row">
                 <div class="item planeswalkers col-lg-3 col-md-4 col-6 col-sm">
                     <a href="../media/gallery/planeswalkers/ajani-300.jpg" class="fancylight popup-btn"
                         data-fancybox-group="light">
@@ -585,31 +588,31 @@ <h2 class="section-title text-center">
                         <img class="img-fluid" src="../media/gallery/planes/zendikar-300.jpg" alt="">
                     </a>
                 </div>
-                <div class="item videos col-lg-5 col-md-6 col-8 col-sm">
+                <div class="item videos col-lg-5 col-md-6 col-12 col-sm">
                     <iframe width="545" height="300"
                         src="https://www.youtube.com/embed/TcNWXRpUM-E?si=b-NU77BdjUeIIo3I&amp;controls=0"
-                        title="YouTube video player" frameborder="0"
+                        title="YouTube video player" frameborder="0" class="youtube-video"
                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                         allowfullscreen></iframe>
                 </div>
-                <div class="item videos col-lg-5 col-md-6 col-8 col-sm">
+                <div class="item videos col-lg-5 col-md-6 col-12 col-sm">
                     <iframe width="545" height="300"
                         src="https://www.youtube.com/embed/oXTM_QQWCWc?si=UdqznsVlMWJJ6GjG&amp;controls=0"
-                        title="YouTube video player" frameborder="0"
+                        title="YouTube video player" frameborder="0" class="youtube-video"
                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                         allowfullscreen></iframe>
                 </div>
-                <div class="item videos col-lg-5 col-md-6 col-8 col-sm">
+                <div class="item videos col-lg-5 col-md-6 col-12 col-sm">
                     <iframe width="545" height="300"
                         src="https://www.youtube.com/embed/2juns0wdQRA?si=Xgri06p1qXe0v2pz&amp;controls=0"
-                        title="YouTube video player" frameborder="0"
+                        title="YouTube video player" frameborder="0" class="youtube-video"
                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                         allowfullscreen></iframe>
                 </div>
-                <div class="item videos col-lg-5 col-md-6 col-8 col-sm">
+                <div class="item videos col-lg-5 col-md-6 col-12 col-sm">
                     <iframe width="545" height="300"
                         src="https://www.youtube.com/embed/videoseries?si=QEvUFJ5DDS_V8TGQ&amp;controls=0&amp;list=PLLHYLVUrqXJhps_HQ0IND6r5_nqY9NVLS"
-                        title="YouTube video player" frameborder="0"
+                        title="YouTube video player" frameborder="0" class="youtube-video"
                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                         allowfullscreen></iframe>
                 </div>
@@ -622,7 +625,7 @@ <h2 class="section-title text-center">
         <div class="container footer-container">
             <div class="row">
                 <div class="col-sm-12 col-md-4">
-                    <img class="logo-foto img-fluid" src="../media/logo.png" alt="Magic the Gathering">
+                    <img class="logo-foto img-fluid footer-foto" src="../media/logo.png" alt="Magic the Gathering">
                 </div>
 
                 <div class="col-xs-6 col-md-2">