Responsive landing page with CSS

Hi,

Congratulations on completing this challenge!!!🎉🎉🎉

I have some suggestions that will help you a lot.

• Since the picture is changing with screen size, it is better to enclose the img in a picture tag. By using picture tag, you won't need to use media query to change the src. For more information on the picture tag, click here.

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

• Instead of defining the font-family for multiple elements individually, it would be better to define it once for all elements.

For example,
span.old-price, span.cart, p, h2{
font-family: 'Montserrat', sans-serif;
}

• Provide the alt for the icon cart image. Make it a point to always provide the alt text for it tells the browser what to show if image cannot be displayed.

• Replace the div outside the main tag, by a footer tag. Since, the ending div is supposed to be a footer, enclose it within the landmark tag footer for better accessibility.

Hope this feedback helps you. Have a nice day!!

Good morning Lawal. Your work's nice. In order to clear the accessibility report, you try the following:

Give your image an alternative text. This text should be meaningful as this is what would be displayed in case the image didn't come up due to network issues or browser compatibility or so.

<img src="images/icon-cart.svg" alt="[image description goes in here]">

Landmarks include HTML5 semantic tags such as header, main, nav, aside, footer. You can read more on it. Placing both paragraphs into the footer tag will clear the second accessibility report.

You can use this site below to test your webpage to check errors and warnings https://wave.webaim.org/