Home>Support>Full-height rows?

Full-height rows?

By motor13, 8 years ago. Last reply by Alex S, 8 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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 7 months ago Alex S
    Hi, I Work Here

    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. 8 years, 7 months ago motor13

    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. 8 years, 7 months ago Alex S
    Hi, I Work Here

    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. 8 years, 7 months ago motor13

    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. 8 years, 7 months ago Alex S
    Hi, I Work Here

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More