Responsive landing page with CSS

Community feedback

• 

  Agnik Bakshi•480

  @Agnik7Posted over 1 year ago

  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!!

  0

  ---

  

  Sherif Lawal Itunu•230

  @lawal-sherif-itunuPosted over 1 year ago

  @Agnik7 thanks but when I use the <picture> tag, I was unable to control the image like I wish. Unlike it was when I used the /img tag

  0

  

  Agnik Bakshi•480

  @Agnik7Posted over 1 year ago

  @lawal2000 You can think of it this way: Inside the picture tag, you're putting the img tag only, in order to provide styling to the image, you can just define the style for the img tag only, and style the picture tag as and when needed.

  Click here to view my solution. From here, I believe you will be able to understand how I am achieving the same result using picture tag.

  Have a nice day!!!!

  Marked as helpful

  0

  

  Sherif Lawal Itunu•230

  @lawal-sherif-itunuPosted over 1 year ago

  @Agnik7 Ooh,okay, thanks

  0
• 

  Akorede Mohammed•30

  @Sisolis-WaynePosted over 1 year ago

  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/

  0

  ---

  

  Sherif Lawal Itunu•230

  @lawal-sherif-itunuPosted over 1 year ago

  @Sisolis-Wayne got it, thanks

  0