Hero image getting cut-off on iPhone 7

Design help General
1

Hey guys,

I’m having a bit of a strange one.

Basically, I’ve more or less finished my site but on doing the final checks on all my devices I noticed the hero image is cutting cut-off when I view the homepage on my iPhone 7 or my brothers Galaxy S9. It looks completely fine when I view it via the breakpoint previews inside the Webflow viewer.

I’ve been messing around with various hero images since I started designing but never noticed anything like this. I thought it could be a padding or margin problem but can’t find anything like that.

This is the first site I’ve ever built so forgive me if I’ve overdone the classes and things of that nature :slight_smile:

Here is my Read-Only link:
https://preview.webflow.com/preview/marcuss-stellar-project-380172?preview=0b74149ba99f31f8ec3dfd14d20083b6

I wanted to launch the site today :frowning:

I’ve attached an image to show you what’s happening.

IMG_0613
IMG_0613375×667 39.5 KB

2

I just noticed It’s fine when I use a colour in the box below the image & gradient section but as soon as I touch that area with an image, gradient or even a solid colour it gets cut off.

Group%2030

3

@msh1411 great question! You may find that you can set your background image to auto to cover the device on mobile:
CloudApp

You may want to consider adding a different background image for the proportions of mobile devices as well.

1 Like
4

Changing it to auto worked. Can’t believe it was that simple. Thanks dude!

1 Like