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.

Full-height rows?

Open 5 replies pluginplugin-page-builderquestion
motor13
10 years ago · Last reply by Alex S 10 years ago

Pre-purchase question:

Is there a way to create full-height (to create fullscreen sections) rows? I understand the content within a row will extend the height of a row, but my hope is to be able to create full-height, scalable content.

Thanks

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

Need fast email support? Get SiteOrigin Premium

Replies

5
  1. Alex S Staff 10 years, 7 days ago

    Hi Motor13,

    Technically no. However with widgets like the Hero Widget (which can be found in the SiteOrigin Widgets Bundle) and a little bit of CSS (which I can help you with) you can easily accomplish this.

    By the way, SiteOrigin PageBuilder is 100% free and if someone is offering to sell you it, please tell me.

  2. motor13 10 years, 7 days ago

    Hi Alex,

    I’m not being charged for the plugin. It’s bundled with a theme and I’m torn between two; Page Builder vs. VC being the differentiator.

    That would be wonderful! I’ll go ahead and post here what I’m trying to accomplish.

    I need a solution for 2 different content/section blocks. They both need to be full-height and full-width.

    full height and width

  3. Alex S Staff 10 years, 6 days ago

    Hi Motor13,

    For something like that I would use a Hero widget (found in the SiteOrigin Widgets Bundle). Take a look at this page. The big image up the top here, while not 100% full height (due to the defined CSS for that layout), is an example of a hero widget.

  4. motor13 10 years, 6 days ago

    Hi Alex,
    Thank you for your response. I’ve been working on this and I think I may have found a more elegant solution.

    Row set to “Full Width Stretched”

    CSS:

    fh-section {
  width: 100%;
  padding: 0 7%;
  display: table;
  margin: 0;
  max-width: none;
  height: 100vh;
}
.fh-content {
  display: table-cell;
  vertical-align: middle;
}

    HTML:

    Using the Visual Editor I added:

    <fh-section>  
  <div class="fh-content">
    <h1>Listen. Think. Design. Refine.</h1>
    We listen to your needs and design thoughtfully refined solutions.
 </div>
</section>

    Now if I can only figure out how to add classes to columns!

  5. Alex S Staff 10 years, 6 days ago

    Hi Motor13,

    Yeah that CSS will work for what you want to do. Typically we recommend adding the class directly to row, or the widget itself, so much so we don’t provide the option of adding classes to columns(this is also to reduce certain clutter as very few people have any need to do this).

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