Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
I would like a div below the menu and above the pagebuilder contents.
The div should fill all the height of the current screen resolution. (useful for background video or fullscreen image)
I can do this in css… but can’t make it work in Vantage.
Can you help?
Hi Wizlore
If this is on your home page then the following inserted at Appearance > Custom CSS will help:
/* Home */ .home #main { padding-top: 0; }From there you’d need to ideally use Page Builder for that page. Appearance > Home Page or Pages > Home > Page Builder tab.
Edit the first Page Builder row and click the Layout tab on the right. Set padding to 0. You can then use the Attributes tab to set a class for the row in question and target it from Appearance > Custom CSS as required. When adding a CSS Class Name to the Attributes field, don’t put a period before the class name.
Nice.. I can now target the first row with my css class…
height: 100%; does not do the trick however. Any suggestions what css to use to make the row fill the remaining height?
You could edit the first row, click Attributes top right and enter your own CSS Class name, for example:
Then under Appearance > Custom CSS you can target that:
.first-row { /* Add your declarations here */ }height: 100% isn’t something that works in CSS divs like it does with tables. If you send through a link to your site we can help further.
http://www.falk-vinduespolering.dk/
So the row marked white should fill the remaining screen height.
Sorry, not quite following. Are you looking to use a grey background for the headling one and for the circle icon widgets?
No I would just like to control the height og the white area (the first row), to fill the entire screen height.
So when you scroll down the next row (with circle icons) appear.
I have made the class as you described… But from there I’m stuck.
Without custom coding (adding JavaScript to find the screen height etc.) the only thing I can think of here is to assign a static height:
.first-row { height: 500px; }Ok… thanks for your time and quick response.
I will try to look into a custom solution.
For sure. Sorry we couldn’t get this setup going out the box. Let us know how you come along.