Landscape Problems - Background Image Doesn't Cover Window

Design help General
1

I could really use some help - I’m stuck! I’ve spent hours trying to fix this problem and I can’t figure it out. Here’s a link to my one-page website: http://evr.webflow.io.

It looks great in portrait on most phones I have tried. However, when I look at the site in landscape, it looks terrible. The same thing happens on a Microsoft Surface, iPad landscape, and pretty much any tablet/desktop with a landscape orientation.

I’m including several picture links I took when I was looking at the website in landscape on various devices. The background, in landscape, does not cover the device background - there is a hard cut off at the bottom. And the text spills over into the black background. I don’t want visitors to have to scroll to see anything.

Hopefully someone knows how to fix this or else I’ll probably have to try building this with Freeway - not good!

Here’s the Webflow share link: https://preview.webflow.com/preview/evr?preview=0836ac8c1f20af4637607d897d118fdd

Device Pictures

Here’s a picture of an iPhone 6 in portrait. This is how it SHOULD look: https://www.evernote.com/l/ABh16zrFJBpNYJPsAXZ7IBkJfMBxV_wN5WkB/image.jpg.

Landscape orientation, on all devices (desktop, tablet, phone) looks bad. Here are some examples:

2

Hi @344kellogg :smiley:

designing can be tricky at times, but after a while, you’ll get the hang of it :wink:

Try this:

3

If I get rid of the 5%, the logo touches the top of the window, which I don’t want. The logo and the rotating tag lines need to be centered in the window on all devices and orientations. There has to be a way to do this. The background image also gets cut off (i.e. doesn’t cover the full background) if the device width is too wide relative to the height. That’s the other big problem I’m running into. I almost feel like that might be a bug with Webflow.

4

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