Hello
I’m just working on my splash page. https://github.com/chunhsianglan/Mozilla-Splash-page.git
For some reasons, the images aren’t showing. It would be great if someone can have a look on it. Many thanks!!
Hsiang
Hello
I’m just working on my splash page. https://github.com/chunhsianglan/Mozilla-Splash-page.git
For some reasons, the images aren’t showing. It would be great if someone can have a look on it. Many thanks!!
Hsiang
Hi @ChunHsiang and welcome to the community
As a reference here is a working <img>
tag.
<img srcset="firefox-logo120.png 120w,
firefox-logo400.png 400w"
sizes="(max-width: 500px) 120px,
400px"
src="firefox-logo400.png" alt="Download Firefox">
Can you spot the two mistakes?
On a general note: It’s cool you that you are using GitHub to host your code. You could activate GitHub Pages for your repository so we could see your “splash page” running: https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site
Have a nice day,
Michael
Hi @mikoMK
Thank you for your comments. I’ve changed the code based on your suggestions but two of my images still are not showing. Couldn’t figure out why.
Would you be able to see my GitHub page? I’ve changed the settings.
Thank you!
Hsiang
Hello @ChunHsiang
Thanks for the GitHub Pages!
These images that are not showing are missing their file extensions in the srcset
attribute. For example
srcset="firefox_logo-only_RGB_big 400w,
firefox_logo-only_RGB_small1 120w"
should be
srcset="firefox_logo-only_RGB_big.png 400w,
firefox_logo-only_RGB_small1.png 120w"
Additionally the pixel values in the sizes
attributes need to be switch. Small images on small screens and big images on big screens:
<!-- wrong -->
sizes="(max-width: 500px) 400px, 120px"
<!-- correct -->
sizes="(max-width: 500px) 120px, 400px"
When you make these changes don’t forget to push them to GitHub, so we can see the updated page.
I hope this gets you further in this exercise. Feel free to ask more questions
Cheers,
Michael
Cool!
I’m glad you could work it out