Images not working on mobile or chrome desktop

Hi, Ive been working on my website and the big issue right now is getting all the images to load on different browsers and mobile. On safari desktop all the images load, but they don’t on google chrome. They also don’t all load on safari or google chrome mobile. I am wondering how I can fix this?

Thanks for any help you can give me.

Here is the link to my website:
Heres my GitHub: GitHub - amandacote/

Hi @amandacote :wave:

You’ve got a neat portfolio site here! I tested your site in Chrome and Firefox. They appear to load as expected. Has this been the case for you in recent days?

If you are still having trouble viewing those images, try clearing your browser cache and refresh.
If that doesn’t work, please let us know which image/s you expect to see, but do not.

Thanks for your compliments on my website. Although it wasn’t from scratch. I used starter code. Anyways, the problem is with mobile now. When you tap on the images it leads you to the project details page and the images for those don’t load they just say “header image”. I think I just have to make the images smaller. That would make sense considering this is for smaller phone screens. Thanks for responding. I appreciate it.

It looks like that code is looking for a file images/hover_800.jpg when the viewport gets to mobile sizes, but that file is missing from your images directory.

<img src="images/vinstruction1.png" srcset="images/hover_800.jpg 800w,
                  images/vinstruction1.png 1200w,
                  images/vinstruction1.png 1400w" sizes="(max-width: 320px) 90vw,
                 (max-width: 700px) 90vw,
                 (max-width: 1024px) 75vw, 50vw" class="project__header__img" alt="header image">

To make this work right away you’ll want to change this to images/vinstruction1.jpg 800w, though for better mobile performance you’ll want to create different images at different sizes for each viewport breakpoint.

1 Like

Thank you so much it worked! I’ll be sure to change the sizes of some of the images at some point.

1 Like