Image not appearing in mobile view?

[indeeannah (Indee-Annah Harvey)]

Hello,

I’m having trouble getting my home page banner/slider image to appear on mobile view.
I’m not sure whether the issue is the file size and it just won’t load on mobile or something else?

Can anybody shed some light, probably turn me red faced, but I’m hoping to launch this ASAP and my brain function today is at a minimal.

Thanks in advance!

---

Here is my public share link: https://preview.webflow.com/preview/indee-visual-design?preview=b3cbe82b57e3d7e4cc14e67851e80d50

[Waldo (Waldo Broodrÿk)]

Hey @indeeannah great question! Just took a look at your site and it looks like the background image used on your banner item is 3.3 MB (which is actually a really, really big image to load on the web and could be the reason why the image didn’t show up on mobile). So I went ahead and save out the image at 1920 × 1444 at 72dpi (save for web via photoshop). Which reduced the file size to 171 KB which should load much faster on all breakpoints now.

You can download the image here: WeTransfer - Send Large Files & Share Photos Online - Up to 2GB Free

Also it looks like your Slide class is set to display: none on the mobile portrait breakpoint, set it to display: Block instead.

Please let me know if this helps

[indeeannah (Indee-Annah Harvey)]

Hi @Waldo,

Perfect! Thank you SO much.
I’ve updated the file and it now works, hallelujah.

Thanks again!

[Waldo (Waldo Broodrÿk)]

Yay! My pleasure to help!

Keep up the great work and keep file sizes in mind for load speeds my rule of thumb is to try and keep large images under 350kb or smaller if possible to help reduce site load times.