3 Column Preview Card with CSS Flexbox

Community feedback

• Account deletedPosted about 4 years ago

  hey Jason, I have no suggestions. but I want your help. I've been stuck with this challenge. I am using bootstrap card layout and row and columns to complete this challege. col-sm-12 property works to certain screen size then the cards reset to their original layout at the smallest resolution. Below is my code. you can check. please help me.

  <div class="row"> <div class="col col-lg-4 col-md-4 col-sm-12"> <div class="card"> <div class="card-header"> <img src="images/icon-sedans.png" alt=""> </div> <div class="card-body"> <h1>Sedans</h1> <p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p> </div> </div> </div>

  <div class="col col-lg-4 col-md-4 col-sm-12">
    <div class="card">
      <div class="card-header">
        <img src="images/icon-suvs.png" alt="">
      </div>
      <div class="card-body">
        <h1>SUVs</h1>
        <p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.</p>
      </div>
    </div>
  </div>
  
  <div class="col col-lg-4 col-md-4 col-sm-12">
    <div class="card">
      <div class="card-header">
        <img src="images/icon-luxury.png" alt="">
      </div>
      <div class="card-body">
        <h1>Luxury</h1>
        <p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.</p>
      </div>
    </div>
  </div>
  

  </div>

  01
• 

  George•10

  @georgelowe

  Posted about 4 years ago

  Hey Jason with regards to corner rounding of the cards you might want to do this:

  .orange.card { border-radius: 10px 0px 0px 10px; }

  .very-dark-cyan.card { border-radius: 0px 10px 10px 0px; }

  Then do a media query for when they are displayed vertically like so:

  .orange.card { border-radius: 10px 10px 0px 0px; }

  .very-dark-cyan.card { border-radius: 0px 0px 10px 10px; }

  That way, when the cards are next to each other the left two corners of the orange and right two corners of the dark card are rounded, but when vertical its the top and bottom two instead

  01