Product_Preview_Card_fm

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @Initye 👋, good job on completing this challenge! 🎉

  Here are some suggestions you might consider:

  Regarding your question:

  • On mobile devices, you can remove the padding and modify its border radius so that the image covers the entire space.:

  @media only screen and (max-width: 375px) {
    .img_container {
       . . .
       /* padding: 1rem; */
       padding-bottom: 1rem;
    }
    .img_container img {
      . . .
      /* border-radius: 10px; */
      border-radius: 10px 10px 0 0;
    }
  }
  

  Here are some other suggestions:

  • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.
  • You can use a <picture> tag when you need to change an image in different viewports. Using this tag will prevent the browser from loading both images, saving bandwidth and preventing you from utilizing a media query to modify the image.

  Example:

  <picture>
     <source media="(max-width: 375px)" srcset="./image-product-mobile.jpg">
     <img src="./image-product-desktop.jpg" alt="your_alt_text">
  </picture>
  

  • You could use the <del> tag to display the old price:

  <del class="old-price">$169.99</del>
  

  • The cart icon is for decoration purposes only, so it can be hidden from screen-readers by adding aria-hidden="true" and leaving its alt attribute empty:

  <img src="icon-cart.svg" alt aria-hidden="true">
  

  I hope those tips will help you.

  Good job, and happy coding!

  Marked as helpful

  3
• 

  Guido Guasch•50

  @guidoghgPosted about 2 years ago

  Hello I'm new at coding but this is the solution that I implemented in my version of this challenge

  @media (max-width: 600px){ .mobileProduct{ display: flex; flex-direction: column; width: 23rem; border-top-right-radius: 1rem; border-top-left-radius: 1rem; }

  .card {
      display: flex;
      flex-direction: column;
      background-color: var(--white);
      border-radius: 1rem;
      height: 43rem;
      width: 23rem;
      align-items: center;
      justify-content: flex-end;
  }
  
  .desktopProduct {
      display: none;
  }
  
  .text {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 1rem;
  }
  

  }

  Marked as helpful

  2