Sunnyside challenge: HTML, CSS, Bootstrap

Community feedback

• 

  Shraddha•485

  @5hraddhaPosted over 3 years ago

  I had similar questions when I was attempting this challenge.

  You can give a read of MDN's Responsive Image section. In the article, they talk about Art direction i.e. wanting to change the image displayed to suit different image display sizes. For example, a web page includes a large landscape shot with a person in the middle when viewed on a desktop browser. When viewed on a mobile browser, that same image is shrunk down, making the person in the image very small and hard to see. It would probably be better to show a smaller, portrait image on mobile, which zooms in on the person. This suits the case in this challenge too. The article suggests to use <picture> element with srcset and media attributes like so:

  <picture>
    <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
    <source media="(min-width: 800px)" srcset="elva-800w.jpg">
    <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
  </picture>
  

  So, for the places where you have used images as background, you can use media queries to switch from desktop images to the mobile ones. And for the places where you have used <img> tag, you can use <picture> element instead.

  Also, there are two minor issues that you can revisit:

  1. We should always give a proper value describing an image to the alt attribute. It is must for accessibility purposes and even if because of some reason the image is not getting displayed on the webpage, this value you specify in the alt attribute will be shown instead.

  2. Please, give a value to href attribute for anchor tags. If you are not sure, at least give href="#", instead of leaving it blank.

  Marked as helpful

  1
• 

  Sodja Nathan O.•205

  @NateOsPosted over 3 years ago

  Its pretty close, great job

  1

  ---

  

  Tyrone Hunt•20

  @tyronehuntPosted over 3 years ago

  @NateOs Thanks!

  0