Fullscreen background responsive trouble

Design help General
1

Hi Everyone,

So my 2 issues are probally a simple fix for others, but im 3weeks in the game and still learning. You guys expertise is much needed! So i love fullscreen backgrounds but the problem im having is my content showing up properly in the middle and also when the screen size changes the side stops at a certain point and from there its all white. I have the section background set to 100VH. I just would like to know how to properly setup a full screen page that allows all of my content to show and not be cut off , so that no matter the screen size it always shows properly! Thanks for your help! A few screen shots are attached.

As you can see on the left side the windows has been shrunk similar to the mobile version, but when you try and scroll down to see the rest its all white :confused:

1717×1600 1.27 MB

Here is my public share link: LINK
(how to access public share link)

2

Hello @JASPER, if your image is in a section element, then all you have to do i add some padding to the sides of the section element to fit you needs. Also put the content in a container element if you already haven’t. You also have to adjust the padding and probable decrease the size of the text in mobile view.

3

Hi @JASPER, would it be possible for you to share the read-only link to the design? Share a read-only link | Webflow University.

It will be a lot easier to give you guidance with this if the link is shared :slightly_smiling:

Regarding the question, I would suggest the following:

For the layout, I would do the following:

  1. Set the body to 100% height
  2. Set the section to be 100% height and width
  3. Drag a div into the section and give it a class
  4. put your content in the div
  5. Select the div you just created and set the position to absolute and set the Top offset to 50%
  6. Still on the div, go to the transforms section of the style tab, and set the y axis to -50%

I hope this helps!

4

@Beez @cyberdave

Thanks for the responses guys im applying those chages you guyes suggested. The screen still shows the white when its made smaller and you try to scroll. Here’s the link to my read-only design.

https://preview.webflow.com/preview/quvier?preview=c9d4b085a7edbc24ac78200fca3a2645

5

@JASPER, Try this.

  1. Put the Column element in its own div. Say footer-div
  2. Set the Position of the HeroSplash to Relative
  3. Set the Position of the footer-div to Absolute and Bottom.
8

Still no luck guys, iv’e managed to get it to be a tad bit more responsive by putting the elements in different sections and divs, but the white space still persits when the screen on mobile is horizontal
:unamused:

9

Hi @JASPER, thanks for getting back in touch. Could you please let me know what kind of mobile device you are using? Make and model?

10

@cyberdave Hey! Im using a iphone 6plus! However when i make the windo bigger and smaller on the desktop it adapts and everything looks awesome but on mobile when i turn my phone sideways to horizontal mode it shows the white space at the bottom!! thanks for replying!

11

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