Section to fill browser window responsively

Hello, How would I make a section fill responsively to the width and height of the browser window?

Thanks in advance


For full width you have to select the ‘full width’ page template. To fill the section vertical you can add the ‘gap’ element and set the space to 100% VH (VH = viewport height).

Hope this helps!

Thanks for helping, @Dagaloni. That is correct.


For more details about Viewport Sizes, please see this article.


Thanks very much @Dagaloni. Has definitely helped. @christian_y The confusion I am having is that I would like a responsive image slider to appear to fill the viewpoint height and width. As this is appearing on my front page I thought this would make sense to be part of a header because of the flexibility within the pro theme to tweak CSS. Is this possible or would you advise to use a plugin such as layerslider?

Sorry for the lengthy reply!

Hello There,

Thank you for the clarifications. We highly recommend that you use a slider and assign the slider above or below your masthead. If you are using Pro theme, you may insert the slider right in your custom header.

To have a fullscreen slider, you must make sure that your slider layout is set to “Fullscreen”.

And to be familiar how to make an auto responsive fullscreen slider, please check out this video:

Hope this helps.

Thanks @RueNel, is the revolution slider the only plugin compatible with pro and fully responsive? Have tried to use some older slider plugins I had used previously and they don’t seem to work at all!

Pro includes LayerSlider which is also responsive.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.