Full Screen Page Section Scrolls

  • 9 November 2016
  • 4 replies
  • 50 views
Alan_C
Badge +1

I would like to make a page where every page section is fullscreen on every device that views it.

This way a visitor gets a 4-way edge to edge immersive experience on the page.

Take a look at this page: https://www.saturn5media.com/

Saturn Media use this and it looks stunning.

They also use some code that perfectly scrolls to the next section with even the slightest scrolling input.

I would love some insight into how I can make this possible within Unbounce!

Many thanks

4 replies

digibomb
Userlevel 6
Badge +1

Hey @Alan_C in terms of the fluid backgrounds, you can do that now in Unbounce. When selecting your background image under background properties>format make sure the following two options are checked “Stretch background to page edges” and “Fit background to container”.

In terms of the scrolling, you want this “Buttery Smooth Scrolling” hack 🙂 [Tips & Scripts] Buttery Smooth Scrolling

Best of luck! Show us what you got when it’s done 😛

Alan_C
Badge +1

Hey @digibomb,

Thanks very much for the scrolling tip, I’ll definitely use that.

However,

I think you may have misunderstood my what I meant by fullscreen.

I can get my background images to fill the page sections (using the same method you shared).

What I can’t do is get each page section to fill the user’s browser window.

So with each ‘buttery-smooth scroll’ the user is presented with another fullscreen page section.

Many thanks

digibomb
Userlevel 6
Badge +1

Hey @Alan_C no prob.

I see now for the BGs. Try this

#lp-pom-block-1 {
height: 100% !important;

}

Change #lp-pom-block-1 to the block number of each panel. Add all these to your stylesheet.

justinabaku

Has this actually worked for you? Looking for the same solution but none of the forums have it resolved 😕

Reply


Terms & ConditionsCookie settings