This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Replace metaslider with div that fills remaining height.

Resolved 9 replies premiumthemetheme-vantage
wizlore
10 years ago · Last reply by Andrew Misplon 10 years ago

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?

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

9
  1. Andrew Misplon Staff 10 years, 9 months ago

    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.

  2. wizlore 10 years, 9 months ago

    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?

  3. Andrew Misplon Staff 10 years, 9 months ago

    You could edit the first row, click Attributes top right and enter your own CSS Class name, for example:

    first-row

    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.

  4. wizlore 10 years, 9 months ago

    http://www.falk-vinduespolering.dk/

    So the row marked white should fill the remaining screen height.

  5. Andrew Misplon Staff 10 years, 9 months ago

    Sorry, not quite following. Are you looking to use a grey background for the headling one and for the circle icon widgets?

  6. wizlore 10 years, 9 months ago

    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.

  7. Andrew Misplon Staff 10 years, 9 months ago

    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;
}
  8. wizlore 10 years, 9 months ago

    Ok… thanks for your time and quick response.
    I will try to look into a custom solution.

  9. Andrew Misplon Staff 10 years, 9 months ago

    For sure. Sorry we couldn’t get this setup going out the box. Let us know how you come along.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread