Full height page (no scrolling)

[lucasbennington]

Hey bubblers,

Still learning the new responsive engine and feel a bit stuck on the basics. I am looking to make a page that is set to be the height of the viewport at all times, so there is no scrolling whatsoever. My pages don’t seem to have a dynamic height and pages with some content on it are too long and I have to scroll down to see it.

The purpose of this is to have “native app feel” while being on different devices. Any way to do this in the new engine?

Thanks!

Lucas

[gerbertdelangen]

Wether an app has a native feel is more determined by the correct width and of course the styling of the elements and not so much by the height. Otherwise how are you ever going to fit all of the content on a mobile screen (f.i. a FAQ with 50 questions and answers, a registration form etc).

A couple of tips:

• Just make sure that page and element width is not larger than the width of the mobile devices you aim for (f.i. 320 px).
• For mobile, use a floating bar which is positioned relative to the bottom of the screen, at the bottom of the screen. Even if the page height is larger than the viewport, it will still look good.
• Use a slideable menu (either plugin or build it yourself)
• Keep a good eye on performance (f.i. the old single page vs. multipage consideration).
• Restyle (f.i. plugin Sweet Scrollbar) or even hide scrollbars
• Use conditional hiding/displaying of elements

Based on your requirements there probably are a lot of other things possible.

[argent.uk]

I hope you figured it out.

I’m still playing around with responsiveness, however I think what you’re looking for lies somewhere within the alignment settings:

Notice the Vertical alignment, it is set to stretch to full height.

NB. This option is not always available, and depends on how your rows and columns are nested. Play around with that, and throw in the tips for tab bar and nav bar from @gerbertdelangen