Home Image not positioned on top of card (nth-of-type(odd)) on small screen sizes

Questions

Image not positioned on top of card (nth-of-type(odd)) on small screen sizes

February 20, 2023

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/bootstrap@4.3.1/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>

>Solution :

Change .blog-card:nth-of-type(odd) flex-direction to column on mobile

.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;
  }
}
@media (max-width: 639px) {
.blog-card:nth-of-type(odd) {
  flex-direction: column;
}

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/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>