Streaming live at 10am (PST)

Image not appearing in mobile view?


#1

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


#2

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. :smile:

You can download the image here: http://we.tl/VC0lCNT9Xn

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

Please let me know if this helps :slightly_smiling:


#3

Hi @Waldo,

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

Thanks again!


#4

Yay! My pleasure to help! :smiley:

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


#5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.