Live Mobile Hero image different to Designer mobile breakpoint

I have two pages on my live site using a hero image set to fixed, so the page scrolls, but the images stay stationary and are viewed in a window. In the designer they are working fine at all breakpoints, but when I look on iPhone 12 Pro, the hero images are showing in their native aspect ratio and showing grey area underneath the image. I want to fix this, but the bigger issue is that what I see in the designer doesn’t match up to the live site on the device - makes me question how good the designer is at previewing.

Live pages: About Us - Legion Creative | Join Us - Legion Creative

How it looks in designer

What I see on the phone


Here is my site Read-Only: Webflow - Legion Creative

Steve,

You don’t mention the browser you are using.
I would search on the forum for issues with Safari for example.
I don’t remember off the top of my head what the Developer browser emulates but I expect its chromium.
Every browser has its quirks and everyone is recommended to try and use the most compatible options between them and test the result.
That of course is very much easier said than done without owning multiple devices or paying for a service.

To your problem, for similar issues in the past from other users I found using Auto is problematic.Screenshot 2021-08-28 215101

https://caniuse.com/?search=height%20auto
Report back if this helps or resolves the issue.

I’m checking on Chrome and Safari on iPhone 12 Pro - same result. I’ll look into the Auto Min H, thanks.

I’ve tried changing that Auto value to 212px, but still the same problem. The most frustrating thing is that the images don’t even stay fixed anymore. What I see in the designer just doesnt match up to the device so its so hard to troubleshoot.

Can’t sleep so I am back, just loaded the about page on my android phone using edge and it shows the same issue.
If I use edge on desktop and drag it as narrow as it will go it looks similar to the developer mobile but not quite as I can’t narrow it enough.
If I use web dev tools and show mobile device it looks the same as the webflow designer.

So we have an issue when we use a live mobile device.
It is rare but something is upsetting it. It can only be proven by publishing and using actual phone to see if change fixes it.

I will take another look just in case I see something.

Screenshot 2021-08-29 035711

Screenshot 2021-08-29 035923

This is the item that causing it.
If you change the size custom auto 75% in the designer to 20% you will see the issue.
Click contain then back to custom to reset it back to auto auto and I think that may fix it.

Thanks for the tip (really appreciate your time by the way) but darn, it’s still wonky. It got rid of the grey area (I had it on 75% before so it cropped in on the image so more of the boy’s face showed up). So after your fix the image is cropping super tight on the image, but for some reason it’s still not fixed, though it works fine on desktop breakpoint.

Ultimately what I’m trying to do (and what looks correct in the designer) is have a nice wider crop on the boy’s face on mobile, but still be fixed. I’ve tried so many variations and have no idea why this won’t work, and why the designer shows different result than the phone.

Right now I’m testing a height of 600px on my staging link and it’s showing pretty much what I’m trying to do - a nice crop. I have the designer at the iphone 12 pro breakpoint and they aren’t matching up perfectly, but basically close enough, but fixed positioning on the image isn’t working at all still.

I like the affect just getting it to behave.
Try this way as using width usually gives better compatibility than height.
Screenshot 2021-08-29 073115

Hope you don’t mind but I have changed the thread title now we have narrowed the issue down some more. Just to keep things tidy and help others who may have similar issue in the future.

390 was too small, that left grey space in the lower part of the image, so I made it 1000 W Auto H - looks good, but fixed positioning is still not working on mobile breakpoint on device (fixed always works in designer).

Hi @LGN_Steve, I hope you are doing well, I wanted to just chime in a bit, some mobile OS change the fixed background attribute to background-attachment: scroll automatically, for example iOS does this:

Shared with CloudApp

One option is to put a div onto the page under the body and make that position fixed with a negative z-index like -1, then put an image element inside that fixed div, that will render as fixed on the mobile device as it is not using background-attachment.

It probably may not be the same exact result as desktop, but then you at least could have some kind of scrolling background on mobile.

You can create one background for Desktop and higher and perhaps another background for tablet and lower and create different elements and set elements to display none on viewports where those are not needed.

Here is some good reading material on fixed background attachments: The Fixed Background Attachment Hack | CSS-Tricks

I hope this helps.