Streaming live at 10am (PST)

Hero Section not showing on iPad


#1

This site loads perfectly on every device except my clients iPad - which is all she ever uses. All she sees is the nav bar without the background image. The Nav bar works and the rest of the content can be displayed. I can’t see that I have done anything stupid - but then… Help appreciated.

She is using Safari as she can’t download Chrome.


Here is my site Read-Only: https://preview.webflow.com/preview/winningmemories?preview=be26e0b8f817b01ee295d49cb4f806d6
(how to share your site Read-Only link)


#2

TL:DR - Nothing looks wrong, get them to clear their cache or use incognito.

I can’t seem to replicate the issue I have even opened in inspect and used the device toolbar to see if that makes any difference. Do you have a link to the published site? That might help with the inspect device toolbar.

From what I can see it is pretty fluid. When selecting the different viewports at the top [Desktop, Tablet, Mobile Landscape, Mobile Portrait] there is a slider along the side of the demo which allows you to stretch and compress depending on the device and along the bottom there is a ruler which shows which devices are at which size (Handy tip if you didn’t know). All along they seem to be fine as well.

I would recommend that your client/friend opens up an incognito tab on her device as she maybe experiencing caching issues.


#3

Thank you @Ben-Probity - is there an incognito mode on Safari? The published site is www.winningmemoriesbespokecushions.co.uk (I know a long domain name).

I didn’t know that - so thank you!


#4

Yes there is incognito in Safari under new tab you should have the option to select incognito which does not save cache or cookies.

The first thing that I notice is that the hero image is taking awhile to load. This could be due to a number of reasons either my computer or issues with code.

My advice would be, instead of having two background images (one the PNG image and the other is the solid background). Perhaps change the background colour from transparent to #85767e and remove the solid background from the section leaving only the image. I would also edit the image so that the background is #85767e and using image compression save it as a jpg to quicken load speeds. It’s only a 1.5mb image but you could easily get that down under 750kb.

Heres a video explaining what I mean about removing the 2nd background.
Loom Video


#5

Thanks for the video @Ben-Probity, I’ve removed the additional colour. I’ll get Clipping Bees to give it a grey background as when I try I can see the clipping lines. Will then ask my client to try clearing Cache / Incognito - Have a super weekend and thank you so much for your help :slight_smile: