Filling the page

Design help General
17

In addition to @bartekkustra’s post, here is the custom code you need to add (Site Settings —> ‘custom code’):

<style type="text/css">
div.full-page {
    width:100%;
}
div#page-nav-Page-1 {background-color:#f00;}
div#page-nav-Page-2 {background-color:#0f0;}
div#page-nav-Page-3 {background-color:#00f;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>
$(document).ready(function(){
    vpw = $(window).width();
    vph = $(window).height();

    $('.full-page').height(vph);
});
</script>

Then, give each section which makes up a page the class of Full Page then in the settings for that element in the panel on the right, give it a unique id of Page-1. Do this for each ‘page’, but of course changing the unique id to Page-2 and Page-3.*

Look at my site’s troubleshooting link to see exactly how this works but each section will not take up the full page on the preview, only at the published subdomain, http://bertie.webflow.com/. Therefore, the website only takes up a full page when the site has been published or exported.

Hope this helps,
Bertie

*Or, if you want to do this after the code has been exported, see Bartosz’s fiddle and use the html to make the sections take up the full page:

<div class="full-page" id="page-1">Page one goes here</div>
<div class="full-page" id="page-2">Page two goes here</div>
<div class="full-page" id="page-3">Page three goes here</div>
1 Like