Assessment wanted for Mozilla splash page (jtilly)

[jtilly]

Hi everyone. I’d like some feedback on my Mozilla splash page assessment.

But I also have a question.

On the “Adding responsive images to the further info links” section, I’m not seeing where my 120px version of the images are displaying in mobile when utilizing Firefox Network Monitor tool.

After clearing the cache and even trying in Chrome it still shows my 400px images and I’m not sure why.

This is what my code looks like for that, lines 121-146.

    <a href="https://www.mozilla.org/en-US/firefox/new/">
      <img 
        srcset="firefox_logo-only_RGB-120w.png 120w, 
                firefox_logo-only_RGB-400w.png 400w" 
        sizes="(max-width: 500px) 120px, 400px" 
        src="firefox_logo-only_RGB-400w.jpg" 
        alt="firefox logo">
    </a>

    <a href="https://www.mozilla.org/">
      <img 
        srcset="mozilla-dinosaur-head-120w.png 120w, 
                mozilla-dinosaur-head-400w.png 400w" 
        sizes="(max-width: 500px) 120px, 400px" 
        src="mozilla-dinosaur-head-400w.png" 
        alt="mozilla dinosaur head">
    </a>

    <a href="https://addons.mozilla.org/">
      <img 
        srcset="firefox-addons-120w.jpg 120w, 
                firefox-addons-400w.jpg 400w" 
        sizes="(max-width: 500px) 120px, 400px" 
        src="firefox-addons-400w.jpg" 
        alt="firefox addons">
    </a>

    <a href="https://developer.mozilla.org/en-US/">
      <img 
        src="mdn.svg" 
        alt="mdn">
    </a>

    <div class="clearfix"></div>
  </div>

I've also compared my code to MDN's finished product - https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-finished/index.html and my code looks almost exact.

Any feedback would be appreciated! Thank you

https://github.com/jasheloper/mozilla-splash-1

https://github.com/jasheloper/mozilla-splash-1/blob/main/index.html

[justsomeone]

Hello @jtilly

you doing great well done

your code work fine from my side i opened the live version and right click on the image then copy the image link and it show that it use the bigger image then i resize the window and it show it use the smaller one as expected

since you cleared your cache and it does not work then try to create new browser profile and try again maybe issue with one of your extension or issue with the profiles itself

hope that help and have a nice day

[jtilly]

Thank you very much!

[justsomeone]

you very welcome