Responsive preview car component using Grid and flexbox

Community feedback

• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @Miassa35,

  Nice job on finishing the challenge

  Just a suggestion, you can add the following rule to your CSS file to reduce the height of the columns to better match that of the design.

  main.grid-wrapper {
      justify-content: center;
      align-items: center;
  }
  

  0

  ---

  

  Miassa•100

  @Miassa35Posted about 2 years ago

  @hyrongennike i put this code in " body " to align the grid-wrapper but it doesn't work because of flexbox but when i do display grid it works. can you explain me why please?

  0

  

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  @Miassa35 default behavior for grid and flexbox is to stretch to the height of the parent and you body element is min-height:100vh so it will not center without you telling it be in the center.

  0

  

  Miassa•100

  @Miassa35Posted about 2 years ago

  @hyrongennike thank you Hyron

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi Miassa, congrats on completing this challenge!

  Your solution seems fine, you did a really good job wrapping the content for these 3 cards. Something you can improve here is to use a single class to manage the content that is mostly the same for the 3 cards (paddings, colors, margins and etc) and another class to manage the characteristics that are different (colors and icon), this way you'll have more control over then and if you need to change something you modify only one class.

  ✌️ I hope this helps you and happy coding!

  0

  ---

  

  Miassa•100

  @Miassa35Posted about 2 years ago

  @correlucas it is what i did by calling different sections as class="col col1" "col col2" and "col col3" is it right?

  0

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @Miassa35 You're welcome Miassa! Then say me if worked for you and if was useful. I'm looking forward for your next challenges!

  0

  

  Miassa•100

  @Miassa35Posted about 2 years ago

  @correlucas i already used separate classes, class "col" for (paddings, margins) and "col1/2/3" for (color), maybe i dont understand your suggestion? Thank you again

  0