Hey all! I’m trying to put together a coming soon page. I used the Coming Soon template, though I suppose I could use anything.
Question: I want to have my home page fit the screen, whatever the screen size is. For instance, if you visit nextdraft.com, you’ll see how it doesn’t matter what size browser you are using, the homepage fills the browser window perfectly. Can I do this? I don’t even want to be able to scroll. I just want that one “screen” splash page.
Thanks!
Hi Daniel,
An edge-to-edge page depends upon the theme in use.
For example, the Beaver Builder theme (part of the Pro package) has a No Header/No Footer page template which will provide what you are looking for. Additionally, it’s Default page template provides for edge-to-edge rows.
Other themes may also have this feature.
Cheers!
Lyle
Thanks Lyle! However, I don’t think I am being clear. When I say “fit the screen” I am not only talking about width-wise, but height-wise. Also, I am referring to the first section of the page, not the entire page.
I’ve made a couple of quick screencasts with Droplr to hopefully show what I’m talking about. In the first one I am resizing the browser window with nextdraft.com open. In the second, I am resizing the browser window with one of the sites I am developing open.
With nextdraft, you can see how the “splash” page fits the browser at various sizes. Whether small or large, you always see the header, logo, subscription box, App Store button, and down arrow. With my site, the “splash,” which in this case should all be the blue checked background image, only covers down as far as I add padding. If your browser window is large enough, you can already see the next “panel” below the first section. If your window is smaller, you can’t see the entire first panel/section.
Anyways, I am trying to figure out if I can do what nextdraft has done. Someone else said it had something to do with background: cover, but I don’t know.
Either way, hopefully my screencasts make it a little more clear. Thanks!
Got it now 
I did manage to get the desired result, but it was sort of convoluted. I am going to see if I can streamline the process a bit better.
BTW, what theme are you using?
Hey Lyle! I’m using Beaver Builder with the Beaver Builder child theme.
Excellent!
However, when all else fails, use a plugin! LOL
https://wordpress.org/plugins/background-manager/
Works like a charm.
Here is a test site where I have set it up:
Oops … I should note that the test site is running Dynamik Website Builder (Child theme for Genesis) and the Genesis Dambuster plugin.
Let me see if I can get it working with the BB child theme.
That’s a cool plugin! The only different I can see between this and nextdraft is that on nextdraft the background picture shrinks and grows as you resize, but with the plugin the background is static (if that’s the right word).
Either way, please don’t lose any sleep over this. I had just seen this done a number of times recently and wondered if it was possible with BB. It looks like it may take some special coding. I’ll figure a way around easy enough.
Thanks!
Dan
Hey Daniel,
You should be able to do this via custom CSS. You can use the No Header/Footer template, place a row on the Page Builder and add a class to it. Say for example, you placed full-height as the class, you can use this CSS to make it full height.
.full-height .fl-row-content-wrap {
height: 100vh;
}
On that specific site, it uses 3 background images depending on the viewport the site is being viewed on. You can check the article below regarding changing the background image on mobile. I’ll add this full height CSS to the KB as well.
http://forum.wpbeaverbuilder.com/knowledge-base/change-row-background-image-on-mobile-view/
Ben
As far as I can tell, that did it. Thanks Ben! And thanks Lyle for tackling this, too.
Ben, we’ve managed to get some great code into that Knowledge Base! At least all my questions are potentially helping others. LOL!
Dan
For sure! And we’ll just keep adding stuff there! Enjoy BB!
Ben
Ok, one additional question. Using Ben’s solution above (which works by the way with a no header and footer template), is there a way to do this with the Beaver Builder Theme with a header and footer, and force the footer all the way to the bottom of the screen? Independent of device, browser, or screen resolution?
Hey David,
Go ahead and try the snippet found on this KB article and see if it’s what you’re looking for.
http://forum.wpbeaverbuilder.com/knowledge-base/force-footer-to-the-bottom-of-the-page/
Ben
Yup that worked. Thanks!
Awesome! Enjoy BB!
Ben