Twenty Seventeen: iPhone 5s: Next/previous arrow awkwardly pushed below posts navigation

[alex27]

The next/previous arrow in posts navigation can get awkwardly pushed below the page-numbers in portrait mode:

[Caspie]

Adding possible fix for small devices (320 to 480px). Tested on iPhone 5s.

[Caspie]

In the possible fix, I've added a new media query (min-width:20em) to cover the small resolution devices. The idea is that the page numbers are actually hidden and we show only prev and next links. The buttons are also wider to be accessed more easily.

[Caspie]

This is how it looks, again on iPhone 5s

[Caspie]

Adding comments and placing the code on the proper places

[Caspie]

Still needs checking. First time you load the page on portrait and you switch to landscape, next button is pushed a little bit down. If the page is refreshed this issue disappears when changing to landscape.

[davidakennedy]

Thanks for the patch @Caspie! That looks like a good start.

@melchoyce We'll probably need to iterate a bit here.

Twenty Sixteen for reference:

[melchoyce]

This only seems to be an issue at the very smallest of screens, where the padding on .wrap is still 3em. I feel like in a GitHub issue somewhere I suggested dropping that down to 2em — can we still do that? 3em makes the line-length super short on small screens.

Alternately, we could ditch the full count and just display the page you're currently on between the arrows?

[melchoyce]

I also think we could reduce some of the space between the numbers if we need to.

[melchoyce]

Tried out some smaller arrows (10px even spacing around the arrow) in small-arrows.png​. This could also help save some space.

[Caspie]

Regarding lowering the space between the page numbers - consider also situations where you are on archive page with 300 pages, for example. Then if you are on page 222 the numbers will look like: < 222 223 ... 300 > which on a small devices will easily push the next arrow.

[laurelfulford]

Good catch, @Caspie!

I also noticed issues when you're a few pages in, even with less spacing around the .wrap element and prev/next links:

It also happens with the narrower two column layout:

In 38394.3.diff​, I tried @melchoyce's suggestion of only displaying the current page on smaller screens, like:

I also addressed a couple other issues:

• Reduced padding around .wrap on smaller screens, as requested above.
• Fixed issue with the page numbers not displaying the underline on hover. This has been updated in the custom colours files, too.

[davidakennedy]

In 38996:

Twenty Seventeen: Fix broken and crowded pagination navigation on small screens

• Hides page numbers visually at smaller screen sizes.
• Reduced padding around .wrap class on smaller screens.
• Fixed issue with the page numbers not displaying the underline on :hover. This has been updated in the custom colors files, too.

Props laurelfulford, caspie.

Fixes #38394.