Creating full screen page sections

[discomatt]

Hi,

I’m wanting to create a one page website, with each section covering the full size of the screen.
I found this post in the forum about using fullpage.js -

Full screen sections

Hi Kobber, The feature that you mentioned is not available out of the box with X and Pro. This is possible with custom development which goes beyond the scope of our support. You might want to look into Fullpage JS and use it to integrate it to your sections. Hope this helps.

Could you confirm if this is still the only way to achieve this, or have there been any updates since?
And if this is the only way to do it, is this purchase just for code that will integrate with PRO?

Many thanks for your advice,
Matt.

[prakash_s]

Hello Matt,

Thanks for writing to us.

To create full-width section please follow these steps.

1. Go to your page —> Click on the settings -->Page template--->Set "Blan -No Container|Header Footer"

2. Go to the Row and click on the magnifier icon to inspect the setting.
3. Set the "Global Container" as "OFF".
   

By following this process you will be able to create a fullwidth section for your page.

As you want to create a one-page website now you can add an ID to each section and that ID needs to be linked to the menu.

Hope it helps
Thnaks

[discomatt]

Hi @prakash_s!

That gets me halfway there, thanks for the help.

I am looking to have each section in the menu of the one pager occupy the entire screen, which includes the height also. Is there a way to calculate this?
For instance, if a screen size is 1920x1080px, is there a way to set/calculate each sections height - so the section’s max height would be set at 1080px or 1100px for bleed?
Then I would do the same for the section, etc?

[nabeel]

Hey @discomatt,

To make the section occupy full height as well for any resolution, you need to add the following code in the Element CSS of your section:

$el {
  height: 100vh;
}

To learn more about CSS Viewport Units please refer to the following guide https://www.sitepoint.com/css-viewport-units-quick-start/

Hope this helps!

[discomatt]

Brilliant, thank you!

[nabeel]

Glad that we could be of help.

Cheers!