Onepage - Section Backgrund


I have a onepage and asection with red background color. I want this section to display in whole web browser window upon start. I want this to be done automatically by the browser. Now its nearly in “full with and height” but its different on explorer and chrome.

Can someone please help?

Set height of first section on page to 100VH

Hi and thanks for the answer.

You mean:

Select section 1 class
Add 100 % to with
Add 100% to height?

I did that now, and I can see that the with adjust accordingly to what i input , but nothing happens when I enter in the heigt. It looks as it is “locked” anyways… i have republished now so you can see.

No, not % but VH, and I did not say “width” at all.

Just change the height to 100vh (just copy and paste 100vh) and the section should feel the screen, the width will automatically readjust to the height :slight_smile: (like Sam said)

Once you’ve done this, that section should fill the window’s height in all screens, no matter how big or small

Thank you very much! I did not fin VH in the option menu - but i added it manually and now it works perfectly.

follow up question:

If I want to center (horizontaly and verticaly) the container inside this section. How do I do that so its sentered perfectly?

For vh you will have to type :slight_smile:
I always type my measures except px (native), but % and vh is always typed in front of the number.

To centre the container you can select the section and use flexbox to move your content like this:

The arrow is the flexbox setting, and the blue box is how you can centre your content.
The red marker shows the way your content is displayed (vertically or horizontally) :slight_smile:

Let me know if you need more help :smiley:

Thank you very much! Case closed :slight_smile:

You’re welcome :slight_smile:

Follow up question:

Now that i have a onepage section with full background size , how do i make another section underneath ?

I have made an " READ MORE " button that i want user to press to automatically scroll down to next section. Also, users can scroll down without pressing the button of course.

hi @dj_robbie,

Just drag in another section and follow this tutorial.

Hope this helps,



I managed to find it out. I had to remove 100VH from the height of section 1 , then drag and drop a new section. And then add 100VH again to section 1

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