Responsive Product Card using Vanilla CSS and HTML

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  HTML 🏷️:

  • In my humble opinion, the tag <picture> is a very good choice when switching between images.

  • Avoid using uppercase text in your HTML because screen readers will read it letter by letter. You can use the text-transform property to transform the text to uppercase in CSS.

    The word "perfume" is written as separate letters, which does not convey the meaning that this text is a single cohesive unit of content. This can be confusing for users and for screen readers, as it can be difficult to understand the meaning of the text.

    Example:

    <p>Perfume</p>
    
    p {
        text-transform: uppercase;
        letter-spacing: 0.3em;
    }
    

  Alt text 📷:

  • The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.

  • Not all images should have alt text. The cart-icon is a decorative image, it does not add any information to the page. You should use an empty alt attribute instead of a descriptive one. You can read more about this here 📘.

    If you want to learn more about the alt attribute, you can read this article. 📘.

  CSS 🎨:.

  • Use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

    screenshot-imgur (landscape mode)📸

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  0

  ---

  

  Koi Hastilow•90

  @KoiHastPosted almost 2 years ago

  @MelvinAguilar Thank you so much for the feedback! I was also kinda confused when the accessibility report said I needed to add a descriptive alt attribute to the cart icon.

  And that totally makes sense about not having "photo" in your alt tag. That was goofy of me. I should've caught that.

  I didn't know that screen readers read capital letters as the actual letter names. I'll make sure to keep that in mind for the future!

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  To center the main on the page using flexbox, replace the height in the body with min-height: 100vh.

  There is no need to give the main a height value, rather give .text-container a padding value for all the sides, this will replace the height of the main.

  In the desktop design give .product-image and . text-container a width of 50% and the img a width of 100% and height of 100%.

  In the media query, give .product-image and .text-container a width of 100%.

  Use relative units like rem or em as unit for the padding, margin and width values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  0