Index.html design (responsive)

css/common.css

@@ -330,15 +330,42 @@ body {
     }
 }
 
+/* --- iPad mini (vertical) --- */
 @media (min-width: 768px) and (max-width: 991.98px) {
+    .titles-frame {
+        margin: 0;
+        text-align: center;
+    }
+
     .row-nav-item {
         padding-right: 0;
     }
 
     .site-footer [class^="col-"] {
         margin-bottom: 30px;
     }
+
+    .site-footer hr {
+        width: auto;
+    }
+}
+
+/* --- iPad pro (vertical) --- */
+@media (max-width: 1024px) and (min-width: 767.98px) {
+    .col {
+        margin: 0 0.3rem;
+    }
+
+    .titles-frame {
+        margin: 0;
+        text-align: center;
+    }
+
+    .site-footer hr {
+        width: auto;
+    }
 }
+
 @media (min-width: 992px) and (max-width: 1199.98px) {
     .navbar-web {
         display: flex;

css/index.css

@@ -310,6 +310,85 @@
     }
 }
 
+/* --- iPad mini (vertical) --- */
+@media (max-width: 768px) and (min-width: 576px) {
+    .img-carousel-1 {
+        content: url(../media/home/carousel/small-jose-vega-cinderella-setpiece-2021-8-4-jv.jpeg);
+    }
+
+    .img-carousel-2 {
+        content: url(../media/home/carousel/Small-josu-solano-430520-floodedcavern-final-v3.jpeg);
+    }
+
+    .img-carousel-3 {
+        content: url(../media/home/carousel/small-david-frasheski-lotrmountainsright.jpeg);
+    }
+
+    .welcome-icon-row {
+        margin-left: 15%;
+    }
+
+    .brain-row {
+        margin-left: 30%;
+    }
+
+    .universes-beyond-row,
+    .game-formats-row {
+        column-gap: 1.5rem;
+    }
+}
+
+/* --- iPad pro (vertical) --- */
+@media (max-width: 1024px) and (min-width: 768.98px) {
+    .col {
+        margin: 0 0.3rem;
+    }
+
+    .img-carousel-1 {
+        content: url(../media/home/carousel/medium-jose-vega-cinderella-setpiece-2021-8-4-jv.jpeg);
+    }
+
+    .img-carousel-2 {
+        content: url(../media/home/carousel/medium-josu-solano-430520-floodedcavern-final-v3.jpeg);
+    }
+
+    .img-carousel-3 {
+        content: url(../media/home/carousel/medium-david-frasheski-lotrmountainsright.jpeg);
+    }
+
+    .welcome-icon-row {
+        margin-left: 20%;
+    }
+
+    .latest-sets-row {
+        margin: 0 5rem;
+    }
+
+    .universes-beyond-row {
+        margin: 0 5rem;
+        column-gap: 1.5rem;
+    }
+}
+
+/* --- Laptop --- */
+@media (max-width: 1440px) and (min-width: 1024.98px) {
+    .img-carousel-1 {
+        content: url(../media/home/carousel/large-jose-vega-cinderella-setpiece-2021-8-4-jv.jpeg);
+    }
+
+    .img-carousel-2 {
+        content: url(../media/home/carousel/large-josu-solano-430520-floodedcavern-final-v3.jpeg);
+    }
+
+    .img-carousel-3 {
+        content: url(../media/home/carousel/large-david-frasheski-lotrmountainsright.jpeg);
+    }
+
+    .brain-row {
+        margin-left: 30%;
+    }
+}
+
 @media (max-width: 1200px) {
     .universes-beyond-frame,
     .sets-text-frame,

index.html

@@ -143,7 +143,7 @@ <h2 class="text-center welcome-title">
 					</div>
 				</div>
 				<div class="col">
-					<div class="row text-center welcome-icon-row">
+					<div class="row text-center welcome-icon-row brain-row">
 						<i class="fa-solid fa-brain welcome-icon"></i>
 					</div>
 					<div class="row text-center welcome-col-text">
@@ -162,7 +162,7 @@ <h2 class="section-title">
 			</h2>
 		</div>
 		<div class="sets-text-frame container">
-			<div class="row">
+			<div class="row latest-sets-row justify-content-center">
 				<div class="col">
 					<div class="card sets-card">
 						<img src="./media/home/latest sets/lost-carvens-ixalan.jpg" class="card-img sets-card-img"
@@ -229,8 +229,8 @@ <h2 class="section-title">
 			</h2>
 		</div>
 		<div class="universes-beyond-frame container">
-			<div class="row">
-				<div class="col col-md-3">
+			<div class="row universes-beyond-row justify-content-center">
+				<div class="col col-md-6">
 					<div class="card universes-card">
 						<img src="./media/home/universes beyond/tomb-raider.png" class="card-img universes-card-img"
 							alt="Art from Tomb Raider Magic Secret Lair" />
@@ -249,7 +249,7 @@ <h5 class="card-title">Tomb Rider</h5>
 						</div>
 					</div>
 				</div>
-				<div class="col col-md-3">
+				<div class="col col-md-6">
 					<div class="card universes-card">
 						<img src="./media/home/universes beyond/jurassic-world.png" class="card-img universes-card-img"
 							alt="Art from Jurassic World Magic Secret Lair" />
@@ -268,7 +268,7 @@ <h5 class="card-title">Jurassic World</h5>
 						</div>
 					</div>
 				</div>
-				<div class="col col-md-3">
+				<div class="col col-md-6">
 					<div class="card universes-card">
 						<img src="./media/home/universes beyond/princess-bride.png" class="card-img universes-card-img"
 							alt="Art from The Princess Bride Magic Secret Lair" />
@@ -287,7 +287,7 @@ <h5 class="card-title">The Princess Bride</h5>
 						</div>
 					</div>
 				</div>
-				<div class="col col-md-3">
+				<div class="col col-md-6">
 					<div class="card universes-card">
 						<img src="./media/home/universes beyond/evil-dead.png" class="card-img universes-card-img"
 							alt="Art from The Evil Dead Magic Secret Lair" />
@@ -318,8 +318,8 @@ <h2 class="section-title">
 			</h2>
 		</div>
 		<div class="game-formats-frame container">
-			<div class="row">
-				<div class="col col-md-3">
+			<div class="row justify-content-center game-formats-row">
+				<div class="col col-md-6">
 					<div class="card formats-card">
 						<img src="./media/gallery/planeswalkers/venser-300.jpg" class="card-img formats-card-img"
 							alt="Art of Venser" />
@@ -342,7 +342,7 @@ <h5 class="card-title">Commander</h5>
 						</div>
 					</div>
 				</div>
-				<div class="col col-md-3">
+				<div class="col col-md-6">
 					<div class="card formats-card">
 						<img src="./media/gallery/planeswalkers/angrath-300.jpg" class="card-img formats-card-img"
 							alt="Art of Angrath" />
@@ -365,7 +365,7 @@ <h5 class="card-title">Standard</h5>
 						</div>
 					</div>
 				</div>
-				<div class="col col-md-3">
+				<div class="col col-md-6">
 					<div class="card formats-card">
 						<img src="./media/gallery/planeswalkers/liliana-vess-300.jpg" class="card-img formats-card-img"
 							alt="Art of Liliana Vess" />
@@ -388,7 +388,7 @@ <h5 class="card-title">Booster draft</h5>
 						</div>
 					</div>
 				</div>
-				<div class="col col-md-3">
+				<div class="col col-md-6">
 					<div class="card formats-card">
 						<img src="./media/gallery/planeswalkers/serra-300.jpg" class="card-img formats-card-img"
 							alt="Art of Serra" />
@@ -411,7 +411,7 @@ <h5 class="card-title">Pioneer</h5>
 						</div>
 					</div>
 				</div>
-				<div class="col col-md-3">
+				<div class="col col-md-6">
 					<div class="card formats-card">
 						<img src="./media/gallery/planeswalkers/huatli-300.jpg" class="card-img formats-card-img"
 							alt="Art of Huatli" />
@@ -434,7 +434,7 @@ <h5 class="card-title">Modern</h5>
 						</div>
 					</div>
 				</div>
-				<div class="col col-md-3">
+				<div class="col col-md-6">
 					<div class="card formats-card">
 						<img src="./media/gallery/planeswalkers/sorin-markov-300.jpg" class="card-img formats-card-img"
 							alt="Art of Sorin Markov" />
@@ -457,7 +457,7 @@ <h5 class="card-title">Oathbreaker</h5>
 						</div>
 					</div>
 				</div>
-				<div class="col col-md-3">
+				<div class="col col-md-6">
 					<div class="card formats-card">
 						<img src="./media/gallery/planeswalkers/ob-nixilis-300.jpg" class="card-img formats-card-img"
 							alt="Art of Ob Nixilis" />
@@ -480,7 +480,7 @@ <h5 class="card-title">Booster draft</h5>
 						</div>
 					</div>
 				</div>
-				<div class="col col-md-3">
+				<div class="col col-md-6">
 					<div class="card formats-card">
 						<img src="./media/gallery/planeswalkers/narset-300.jpg" class="card-img formats-card-img"
 							alt="Art of Narset" />