Skip to content
OverviewSolutions
4
Comments
1
Fab
@tdreams

All comments

  • Nicholas Albuquerqueā€¢270
    @nicoamsSubmitted about 2 years ago

    Hello guys!

    I had some doubts while working on this project and I hope you could help me with them:

    1. About the nesting on HTML: I only used divs to contain the elements, including the ones that work as background and as the box to hold the major information about the product ("image" and "infos"). Is there any other feature that works best for this purpose and let the divs only for minor elements (paragraphs and links)?

    2. About the CSS: I tried to rearrange the position of the image and text inside the button, but it did not work as I planned. Maybe because it is a link <a></a>. Is there any way to improve that?

    That is it. If you have any other tips or observations, please, feel free to share.

    Thank you!

    Responsive Product Preview Card Page

    1
    Fabā€¢50
    @tdreamsPosted about 2 years ago

    Hi @nicoams šŸ‘‹, good job completing this challenge, and welcome to the Frontend Mentor Community! šŸŽ‰

    1. Here are some suggestions you might consider: 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.

    2. In this challenge, you should not use the background property to set the image because this image has semantic meaning. Use the CSS background property if the image is not part of the content.

    Example:

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

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

    <del>
   <span class="sr-only">Old price: </span>$169.99
</del>

    Note that I added the <span> with the sr-only class to the del element, this will provide more information about what your old price is about.

    Good job, and happy coding!

    1