I have cards that have a image, either on the left of right side of the card depending on if it’s a odd or evened numbered card. On small screens, only the even numbered cards show the image on top. For the odd numbered cards the image is hidden.
This is shown in the code snipped. Full screen shows all images (four), but when you decrease the viewport only the even numbered card reposition their images to the top of the card.
I cannot find the culprit, but I guess it has something to do with the :nth-of-type() CSS pseudo-class I’ve used. Any suggestions how to fix this?
Kind regards
.blog-card {
display: flex;
flex-direction: column;
margin: 1rem auto;
box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .07), 0 6px 18px -1px rgba(0, 0, 0, .04);
margin-bottom: 1.6%;
background: #fff;
line-height: 1.5;
border-radius: 0;
overflow: hidden;
z-index: 0;
}
.blog-card:nth-of-type(odd) {
flex-direction: row-reverse;
}
.blog-card:nth-of-type(odd) .description:before {
left: inherit;
right: -10px;
transform: skew(3deg);
}
.blog-card:hover .photo {
transform: scale(1.1) rotate(3deg);
}
.blog-card .meta {
position: relative;
z-index: 0;
height: 200px;
}
.blog-card .photo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: center;
transition: transform 0.3s;
}
.blog-card .description {
padding: 1rem;
background: #fff;
position: relative;
z-index: 1;
}
.blog-card .description h1,
.blog-card .description h2 {
font-family: Poppins, sans-serif;
}
.blog-card .description h1 {
line-height: 1;
margin: 0;
font-size: 1.7rem;
}
.blog-card .description h2 {
font-size: 1rem;
font-weight: 300;
text-transform: uppercase;
color: var(--grey-700);
margin-top: 5px;
}
.blog-card p {
position: relative;
margin: 1rem 0 0;
}
.blog-card p:first-of-type {
margin-top: 1.25rem;
}
.blog-card p:first-of-type:before {
content: "";
position: absolute;
height: 3px;
background: var(--brand-color);
width: 100px;
top: -0.75rem;
border-radius: 0;
}
@media (min-width: 640px) {
.blog-card {
flex-direction: row;
max-width: 900px;
}
.blog-card .meta {
flex-basis: 40%;
height: auto;
}
.blog-card .description {
flex-basis: 60%;
}
.blog-card .description:before {
transform: skewX(-3deg);
content: "";
background: #fff;
width: 30px;
position: absolute;
left: -10px;
top: 0;
bottom: 0;
z-index: -1;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.usebootstrap.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<h2>Cards</h2>
<hr>
<div class="blog-card">
<div class="meta">
<div class="photo" style="background-image: url(https://images.unsplash.com/photo-1611080402167-ed75bae6df32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bW91bnRhaW4lMjBsYW5kc2NhcGV8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60)"></div>
</div>
<div class="description">
<h1>Lorem Ipsum</h1>
<h2>dolor sit amet</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad eum dolorum architecto obcaecati enim dicta praesentium, quam nobis! Neque ad aliquam facilis numquam. Veritatis, sit.</p>
</div>
</div>
<div class="blog-card">
<div class="meta">
<div class="photo" style="background-image: url(https://images.unsplash.com/photo-1611080402167-ed75bae6df32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bW91bnRhaW4lMjBsYW5kc2NhcGV8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60)"></div>
</div>
<div class="description">
<h1>Lorem Ipsum</h1>
<h2>dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad eum dolorum architecto obcaecati enim dicta praesentium, quam nobis! Neque ad aliquam facilis numquam. Veritatis, sit.</p>
</div>
</div>
<div class="blog-card">
<div class="meta">
<div class="photo" style="background-image: url(https://images.unsplash.com/photo-1611080402167-ed75bae6df32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bW91bnRhaW4lMjBsYW5kc2NhcGV8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60)"></div>
</div>
<div class="description">
<h1>Lorem Ipsum</h1>
<h2>dolor sit amet</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad eum dolorum architecto obcaecati enim dicta praesentium, quam nobis! Neque ad aliquam facilis numquam. Veritatis, sit.</p>
</div>
</div>
<div class="blog-card">
<div class="meta">
<div class="photo" style="background-image: url(https://images.unsplash.com/photo-1611080402167-ed75bae6df32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bW91bnRhaW4lMjBsYW5kc2NhcGV8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60)"></div>
</div>
<div class="description">
<h1>Lorem Ipsum</h1>
<h2>dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad eum dolorum architecto obcaecati enim dicta praesentium, quam nobis! Neque ad aliquam facilis numquam. Veritatis, sit.</p>
</div>
</div>
2
Answers
Yo have to set a media query for the odd cards to haw raw reverse only up to a certain pixels:
So that the difference will be only on the viewport you choose
Change .blog-card:nth-of-type(odd) flex-direction to column on mobile