3-column preview card GRID FLEXBOX

Community feedback

• 

  IRVINE MESA•1,855

  @DrMESAZIMPosted over 2 years ago

  Hi MATHEUS

  I went through your solution , there is only one issue I would like to help you that's on mobile responsiveness. Here are the step we will take

  1. Add new div tags name inside file index.html line 12 with class name "container" and its corresponding closing tag on line 29

     <div class="container"> </div>

  2. inside file index.css start by setting the body to body{height: 100%}

  3.inside file index.css On line 106 add this code

  .container{

  display: flex;
  
  flex-direction: column;
  

  }

  .sedans{ border-top-right-radius:0.6rem ; }

  .luxury{

  border-bottom-right-radius:0.6rem ;
  

  }

  @media only screen and (min-width:600px){

  .container{
  
      display: flex;
  
      flex-direction: row;
  
  }
  
  .sedans{
  
  border-top-right-radius:0rem ;
  

  }

  .luxury{

  border-bottom-right-radius:0.6rem ;
  
  border-top-right-radius: 0.6rem;
  

  } }

  Marked as helpful

  1
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Matheus! 👋

  Congratulations on finishing this challenge! 👏 Good effort on this challenge! 👍

  There are some areas that can be improved.

  • All those car icons are for decoration only which means that if they don't exist, there will be no missing information from the site. So, I would recommend hiding it from assistive technology users so that they don't have to listen to the unrelated page content. Also, worth mentioning that you've done a good job with the alternative text because there's no "icon" word in it. But, since these icons are decorative images, it's best to keep the alt empty.
  • I would expect the "Learn More" buttons would be link elements. I think if this is a real website after the users click one of those buttons, they will get navigated to another webpage. So, what do you think is going to happen after the users click the button?
  • On mobile landscape view (640px * 360px), I notice that the last card doesn't have enough space to show up properly and the cards get cut off a little bit. I recommend using min-height instead of height on the body element so that it can grow if needed.

  One tip that I would like to recommend is to write the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.

  That's it! Hope this helps. 😊

  Marked as helpful

  1