Responsive Product Preview using Grid

Community feedback

• 

  Antoine C•1,210

  @mattari97Posted about 2 years ago

  Hello Duchessa. Good job completing this challenge 🎉🎉🎉.

  I see that you have good basics in front-end and the result is great.

  I will try answer your questions to the best of my abilities and give you some small advises:

  • First of all about the "centering". I think that you were really close to the solution because I can see that you already know about the margin: auto trick with flexbox which worked on the inline axis (horizontal) already. However to make it work on the block axis you need to give a height (or in this case a min-height) to the body element.

  the code would look something like this:

  body {
      /* KEEP Previous styles ... */
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center
  }
  
  main {
      /* REMOVE previous styles */
      margin: auto; /* Put the main in the center & push footer at the bottom */
      padding: 1rem;
      width: min(100%, 40rem);
  }
  

  You can remove every over margin: auto in your css and all max-width.

  Note: the property width: min(100%, 40rem); is a shorthand for width: 100%; max-width: 40rem;

  • If you look closely, the border-radius is not "applied" to the image in the .product-card. It happens because the image overflows its container and does not have a border-radius itself. Rather than giving it a border radius you can add the property overflow: hidden to the .product-card which will hide the sharp edges of the image that are "outside" of the section.
  • The image looks distorted when the screen's width is between 380px and 575px. To fix that add the property object-fit: cover to the .product-img class.
  • I would suggest that you add a little transition on the "Add to cart" button for the hover effect. It could be something like this:

  .add-to-cart {
      /* KEEP previous styles */
      transition: 300ms background-color linear;
  }
  

  You can play with the duration and the timing-function as you like until you find something that you like 👍

  • And finally here is an example of a picture element from one of my solutions :

  <picture>
      <source media="(max-width: 649px)" srcset="./src/assets/mobile/image-header.jpg" />
       <img
         class="header__image"
         src="./src/assets/desktop/image-header.jpg"
         srcset="./src/assets/desktop/image-header.jpg"
         alt="An orange sliced in half" />
  </picture>
  

  That's it. I hope it helps. Have a nice day/night and happy coding 😊

  Marked as helpful

  1

  ---

  

  Duchessa•70

  @duchessa01Posted about 2 years ago

  @AntoineC-dev Thank you so much! So helpful, I had to mention you in the acknoledgments. That "width" shortcut and the "min" property are simply genius. Again thank you for the time you took to write everything off, I appreciate it a lot and hope it could help others as much as it helped me.

  1

  

  Antoine C•1,210

  @mattari97Posted about 2 years ago

  @duchessa01 hey no problem! My pleasure 🙂 keep coding ; Peace . ✌️

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @duchessa01, Congratulations on completing this challenge!

  Your solution its almost done and I’ve some tips to help you to improve it:

  Use the THE PICTURE TAG that is a shortcut to deal with the multiple images in this challenge. So you can use the <picture> tag instead of importing this as an <img> or using a div with background-image. Use it to place the images and make the change between mobile and desktop, instead of using a div or img and set the change in the css with display: none with the tag picture is more practical and easy. Note that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image. Manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device desktop + mobile.

  Check the link for the official documentation for <picture> in W3 SCHOOLS: https://www.w3schools.com/tags/tag_picture.asp

  See the example below:

  <picture>
    <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg">
    <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;">
  </picture>
  

  👨‍💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

  ✌️ I hope this helps you and happy coding!

  0