ARTICLE AD BOX
I'm planning on having a swiper just below the "state heading", however when I add any other elements, rather than stacking on top of one another, the swiper slides shift to the right and I can't move the header above them. When I did flex-direction: column; it broke the swiper later down the line.
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Poppins, sans-serif;
}
/* General body formatting*/
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
background-color: #dfdfdf;
}
.state-name-container {
padding: 2%;
background-color: blue;
width: 100vw;
margin: 0;
}
/* Header Styling */
.state-name-container .state-name h1 {
font-weight: 800;
font-size: 40pt;
color: #000000;
text-decoration: underline;
text-underline-offset: 2px;
margin: 0;
}
.swiper-container .card {
list-style: none;
}
.deck .card .card-frame {
width: 400px;
display: block;
background: #ffffff;
padding: 14px;
border-radius: 12px;
text-decoration: none;
border: 2px solid transparent;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
}
.deck .card-frame .card-face {
width: 100%;
object-fit: cover;
border-radius: 10px;
}
.deck .card-frame .organ {
font-weight: 600;
}
.card.blue .card-frame .name {
color: #445a7d;
}
/* Good card name text formatting */
.card.pink .card-frame .name {
color: #dc00dc;
}
.deck .card.blue .card-frame .download-button {
height: 35px;
width: 35px;
font-size: 20px;
margin: 0 50% 0;
translate: -50%;
color: #445a7d;
background: none;
cursor: pointer;
border-radius: 50%;
border: 2px solid #445a7d;
transition: 0.4s ease;
transform: rotate(90deg);
}
.deck .card.blue .card-frame .download-button:hover {
color: #ffffff;
background-color: #445a7d;
}
.deck .card.pink .card-frame .download-button {
height: 35px;
width: 35px;
font-size: 20px;
margin: 0 50% 0;
translate: -50%;
color: #dc00dc;
background: none;
cursor: pointer;
border-radius: 50%;
border: 2px solid #dc00dc;
transition: 0.4s ease;
transform: rotate(90deg);
}
.deck .card.pink .card-frame .download-button:hover {
color: #ffffff;
background-color: #dc00dc;
}
<body>
<div class="state-name-container">
<div class="state-name">
<h1>ALABAMA</h1>
</div>
</div>
<div class="parent-container">
<div class="swiper-container swiper">
<div class="deck swiper-wrapper">
<li class="card blue swiper-slide">
<div class="card-frame">
<img src="../ASSETS/BLUE.png" class="card-face">
<p class="organ"> U.S. House Rep AL-01 </p>
<h2 class="name">BARRY MOORE</h2>
<button class="download-button">></button>
</div>
</li>
<li class="card blue swiper-slide">
<div class="card-frame">
<img src="../ASSETS/BLUE.png" class="card-face">
<p class="organ"> U.S. House Rep AL-02 </p>
<h2 class="name">SHOMARI FIGURES</h2>
<button class="download-button">></button>
</div>
</li>
<li class="card blue swiper-slide">
<div class="card-frame">
<img src="../ASSETS/BLUE.png" class="card-face">
<p class="organ"> U.S. House Rep AL-03 </p>
<h2 class="name">MIKE ROGERS</h2>
<button class="download-button">></button>
</div>
</li>
<li class="card pink swiper-slide">
<div class="card-frame">
<img src="../ASSETS/PINK.png" class="card-face">
<p class="organ"> U.S. House Rep AZ-03 </p>
<h2 class="name">YASSAMIN ANSARI</h2>
<button class="download-button">></button>
</div>
</li>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-slide-button swiper-button-prev"></div>
<div class="swiper-slide-button swiper-button-next"></div>
</div>
</div>
</body>
Picture of my side:
