Streaming live at 10am (PST)

Onepage - Section Backgrund


#1

Hello!

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?

http://mobilpolicy.webflow.io/


#2

Set height of first section on page to 100VH


#3

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.


#4

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


#5

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


#6

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?


#7

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:


#8

Thank you very much! Case closed :slight_smile:


#9

You're welcome :slight_smile:


#10

Follow up question:

http://mobilpolicy.webflow.io/
https://preview.webflow.com/preview/mobilpolicy?preview=9d3cd14e822ae4641d1cd8ef5cbf42cd

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.


#11

hi @dj_robbie,

Just drag in another section and follow this tutorial.

Hope this helps,

L


#12

UPDATE!

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


#13

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