Full height row - 90% of viewport size + floating columns to top?

Beaver Builder
#1

Hi Amazing Beaver Builder team!

I’m loving the new full height rows.

Two questions:

  1. Is the height of the viewport in a full height row calculated with CSS? Is it possible to override the full row height to be 80% or 90% so that it shows part of the content below and still have it resize automatically?

  2. I have a full height row which includes multiple columns in it - a logo, desktop menu (shown only on desktop), mobile menu (show only on small / medium) and a headline. I want the headline to be centered in the full-height row and that’s working perfectly.

However, I want the logo and menus to be aligned at the top of the full-height row rather than being centered as well.

Are you able to give me some guidance as to what CSS to use to float these columns & logo back to the top of a full height row?

Thank you!

Keep being awesome :slight_smile:

#2

Hey Phill,

Thanks for the kind words!

  1. The full height is achieved by setting a min-height of 100vh to the row wrapper. So that's 100% of the viewport height. You can play around with that value to suit your needs. You're gonna have to assign different values for mobile optimization though.
  2. Can you share the URL of the site so we can take a look?

Ben

#3

[Content Hidden]

#4

Thanks for the tip re: 100vh, it looks like it will work great!

We can set for desktop:

div#fullheightrow .fl-row-content-wrap {
min-height: 80vh;
}

…and use media queries to set back to 100vh for mobile.

Look forward to hearing back from you re: the logo & menu top placement.

#5

Hey Phill,

Try the CSS snippet below and see if it works!

#fullheightrow .fl-row-content {
  position: static;
}
#fullheightrow #vup-logo {
  position: absolute;
  top: 0;
  left: 0;
}
#fullheightrow #vup-menu {
  position: absolute; 
  top: 0;
  right: 0;
}

Ben

#6

Hi Ben!

Thank you!

That almost does what we need. I tweaked it some more and was ready to deploy when I realised it was breaking on ipads - everything compressed at top of the screen.

Seems like there may need to be some ipad specific css?

I’m going to look at again in a few days.

Thank you for your awesome help so far.

#7

Hey Phill,

There seems to be a bug indeed only when the height is 1024px which happens to be the height of the iPad. I have already issued a bug report for this though, thanks for the heads up! In the meantime, try the CSS snippet below and see if this fixes it.

@media (device-height: 1024px) and (device-width: 768px) and (orientation: portrait) {
  .fl-builder .fl-row-full-height .fl-row-content {
    height: auto;
  }
}

You may need media queries to fix the overlapping menu and logo. Possibly lower the font-size of the menu items or reduce its side paddings.

Ben

#8

Thanks Ben! I’ll check it out.

#9