Screens - scroll on one page?

Classic
1

hi there @zeebe et al, i am just trying out “screens” for the first time and i am hitting on a pesky little problem with scrolling. on the first Page (that’s are there is right now) i would like to be able to scroll down to read the text. unfortunately doing that gets me right away to page 2 so the text is basically unreadable. anything i am doing wrong? the project: www.sandbox1.tn089.de
would be nice if i could have a solution asap because the client is waiting for some pages on monday :frowning:
thanks a ton, tomas

2

Screens scrolls one browser height at a time. Your content exceeds the browser height and so gets cut off. Successful use of screens is all about content control. You have two options:

  1. AutoScale
    Auto scale the content so that it always fits within one browser height (and remember to account for the heights that you may encounter on phones and tablets in landscape). The Screens page stack has an AutoScale control that allows you scale the text. If you need more control you can use the FlexiFont stack which will give more control over individual elements and extends the capabilities of the built in autoscale - see the Responsive Mode section half way down the page and look at the left hand white text box as you make the browser height smaller and larger.

  2. Use Screens “In Page Scroll” feature.
    This will allow individual pages to scroll without the stack snapping to the next page - but use this with caution, the snap scroll will still occur as you reach the bottom of the content for each page and can be disorienting for the viewer. The trick is to add some extra padding to the bottom of the page in order to give some room for the viewer to scroll and read the content before the snap scroll kicks in.
    You can enable the in page scroll by selecting “Advanced Scroll Options” in the main stack settings and then choosing when to apply in the In Page Scroll using the dropdown selection.

3

hallo @tav and thanks much for your speedy reply. unfortunately it seems that the “screens” stack forces me to limit my content to one picture and one line of text? i went back to my design an started squeezing things around, making the picture of the man smaller, arranging the text in a 1-column stack but still no luck, even when i apply all the nifty tricks you pointed out.
isn’t there somewhere a possibility where i can determine the height of the page? after all it is a bit limiting my design possibilities. looks like “screens” is useless for my purposes, i just don’t like to be forced to cut short my text or change my design just because a stack gives me certain amount of maximum height. guess i’ll just have to go back to good old “foundation” or will woodhouse’s “flood” theme to achieve whatever i want to.
thanks much again and cheers, tomas

4

Hi @tnittner I did a site for a friend. I chose Screens because I didn’t think he had much content but he ended up getting a bit wordy. Anyway, you can see it here www.cordons.net (go easy on me, it was one of my first sites! :slight_smile: )

But, yeah, it probably has too much content but I found it much more flexible than it sounds like you’re experiencing.

5

The whole point of screens is that it snap scrolls a “Screen” at a time. The size of the screen is obviously dictated by the hardware.

If you need more content than will fit on a page then use Sections instead. This has the ability to size each section to the browser height but, crucially, if that content overflows the available screen size it automatically reverts to full height display for that section. This auto content control is demonstrated here http://demo.bigwhiteduck.com/sections/full-height/

You obviously don’t get the snap scroll feature but you can easily have scroll links using magicgellan links and markers (like the page here )

6

hey @tav, i changed things around a bit and it looks like i am getting there. if you want to have another look… www.sandbox1.tn089.de
incidently i used the “site styles” from my foundation stacks. is that “state of the art” or overkill?
thanks and cheers, tomas

7

Yes, that is getting better now. Don’t be afraid to split content between pages, it can work quite well, especially if you keep a constant background color. When you get to another part, you can use a different background colour. - Just an idea.

The other thing is to make use of the Foundation visibility stacks to hide some content for mobile. This really is a case for mobile first design, work out what will fit on an iPhone screen and then add content for larger screens.

Site styles is certainly your best choice. Screens styles is just there for those without Foundation. You get a lot more options in Site Styles.

8

thanks much @tav, most helpful - with lightning speed :yum:

1 Like