Three-part unscrollable page

[dimitrisco]

Hi, does anyone know how to create an unscrollable page with three parts as this one? I am only interested on the three-part structure that fills the viewport on desktop and doesn’t scroll.
Thanks in advance.

[nabeel]

Hi @dimitrisco,

Thank you for reaching out to us. You probably can achieve this by first selecting any Blank - No Container page template (I’d suggest Blank - No Container | No Header, No Footer), then add a section with two columns layout and in Element CSS of this section you can add the following code:

$el {
  height: 100vh;
}

This will make your section fill the entire viewport. In the second column you can add two rows (1 column layout for each row) to have two stacked rows. This will make your three-part structure. Now you can add your content in each of the columns accordingly. If your content doesn’t exceed the visible viewport area then no scrollbar will appear.

The above method is the most simplest you can try however you can achieve this with Grid element if you’re using Pro, you can also do this with Revolution Slider

Hope this helps!

[dimitrisco]

Thanks @nabeel for your help. Meanwhile, you say “If your content doesn’t exceed the visible viewport area then no scrollbar will appear”. How can I assure that the content in each part of the page doesn’t exceed the visible viewport? Supposing I am about to put three photos in that page (one in each part) how can I define the dimensions of each photo?

[ruenel]

Hello @dimitrisco,

If you use a section/row/column or the grid/cell layout, you can set in the column or cell settings the maximum height up to 100vh so that the height will not exceed the viewport.

For column settings:

For cell settings:

If you want to insert a photo, make sure that the height of the photo is not in landscape view or that the height is greater than the width.

Hope this helps.