My Second Solution to the Product Preview Card

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Ebi, congratulations for your new solution!

  I'll say you how I build this solution using grid for the layout and how to align it with flex.

  1.The best way to build this component with two columns is by using GRID LAYOUT since it is simpler to manage the columns and then create the media query for mobile. Here’s the steps to create it with grid create the main block to hold all the content (you can use <main> to wrap), set its width as max-width: 900px (it's the container size) and display: grid / grid-template-column: 1fr 1fr(this means that your component will have two columns with 50% of the container width each thats 450px).

  Then to create the mobile version, all you need to do is to change the container flow vertically with grid-template-column: 1fr.

  2.To make this alignment, first of all put min-height: 100vh to the body to make the body display 100% of the viewport height (this makes the container align to the height size thats now 100% of the screen height) size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

  3.A best practice to have all the image inside the container scaling and respecting the size of the container, you need to add max-width: 100% and add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  🐸 Use this mini game to learn FLEXBOX and all its properties by positioning the frog and become a FLEXBOX MASTER here's the link: https://flexboxfroggy.com/

  ✌️ I hope this helps you and happy coding!

  1
• 

  Ebi Akangbou•170

  @Ebi-AkangbouPosted about 2 years ago

  Thanks I really appreciate.

  0