Responsive landing page using HTML and Sass

Hi Layne . Well done , your solution looks great and is responsive.

For the picture message, you do not have to declare it separately for , mobile , tablet and desktop. It should be one declaration as follows.

<picture>
    <source media="(min-width: 61.25rem)" type="image/webp" 
              srcset="./assets/image-hero-desktop.webp, ./assets/[email protected]"/>
     <source media="(min-width: 61.25rem)"
                srcset="./assets/image-hero-desktop.png, ./assets/[email protected]" />
                        {/*tablet images */}
       <source media="(min-width: 38.75rem)" type="image/webp" 
              srcset="./assets/image-hero-tablet.webp, ./assets/[email protected]"/>
     <source media="(min-width: 38.75rem)"
                srcset="./assets/image-hero-tablet.png, ./assets/[email protected]" />
                        {/*Mobile images */}
      <source type="image/webp" 
                srcset= "./assets/image-hero-mobile.webp, ./assets/[email protected]" />
          <img  srcset="./assets/[email protected]"
                      src="./assets/image-hero-mobile.png"   alt=""   />
</picture>

source Responsive Images 101, Part 6: Picture Element

• When you are using the picture element, you do not need to use css display: none or any other css methods to control which image size to display - that is mainly left for the browser to interpret your html . At the moment all images will be downloaded when a user visitor uses your site. Remember the html is passed first before css - hence by the time display: none is applied all the images will have downloaded - it is expensive for the user and slows down your site(every second counts)