product-preview-card-component with flex-box

Community feedback

• 

  Ahmed Mohamed 🇵🇸•310

  @ahmedafsaPosted 12 months ago

  Hello @Asumpta-1, great work!

  Here are some notes for improving the code:

  • CSS Grid is best for the two-dimensional layouts with many elements that need to be precisely positioned relative to each other, while Flexbox is better for one-dimensional or single-line layouts where you just need to space a bunch of elements a certain way. So in case of the card in the challenge, it's better to use CSS Grid like the following

  .your-container-div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 600px;
  }
  

  This will align the product image next to the details directly, making the code better and easier and It will also help us in making the component responsive by converting the layout from two columns to one column through media query, like this:

  @media(max-width:600px) {
    .your-container-div {
      grid-template-columns: 1fr;
    }
  }
  

  • Regarding the product image It is better to use the <picture> element with <source> tags to make the product image responsive where based on your screen width, the appropriate image will be loaded instead of the two <img> elements.

  <picture>
    <source
      srcset="images/image-product-mobile.jpg"
      media="(max-width: 600px)"
    />
    <source
      srcset="images/image-product-desktop.jpg"
      media="(min-width: 601px)"
    />
    <img src="images/image-product-desktop.jpg"/>
  </picture>
  

  Best wishes to you!

  Marked as helpful

  0

  ---

  

  Asumpta-1•30

  @Asumpta-1Posted 12 months ago

  Hi @ahmedafsa , Thank you for your detailed solution, very much appreciated. I will implement this asap and learn css grid better. Happy Coding!

  1