[RFC] Initial papercut fixes for mobile #2
Conversation
Changes for mobile: * The header links are now visible * The footer is anchored to the bottom of the page with smaller font-size * Some margins were added to various boxes that end of stacking on mobile Changes for desktop: * The issue where text was being cut-off should be fixed (for real this time!) Global changes: * The copyright notice was moved to the right-side of the footer in anticipation of links being added to the left side so that the links will appear before the copyright notice on mobile * Update template with the above change and add mobile.css
|
A fix to properly place the footer at the bottom of the screen when content does not fill the viewport (e.g. here) is in the works. Please do not merge until this commit is made. |
|
Commit sroracle/galapagos-linux.github.io@35ba07a4883b91ae8af50ea8b3a3741241865d65 fixes the above issue. |
| @@ -0,0 +1,56 @@ | |||
| @media only screen and (max-device-width: 750px) { | |||
There was a problem hiding this comment.
Why 750px?
This seems to work okay on mobiles in both orientation, but on some tablets (Nook, Fire, iPad/iPad mini), it looks weird in portrait mode because the tablet is 768 screen pixels. Namely, the hero columns are close together (they need the margin-bottom at line 14).
There was a problem hiding this comment.
The 750px limit is arbitrary, it's just to detect if the device is mobile or not. Would bumping it to 800px solve the tablet problem?
There was a problem hiding this comment.
768px is probably good. That is the width of older laptops/netbooks and most tablets, which would all benefit from this layout.
| bottom: 0; | ||
| height: 5em; | ||
| font-size: 10pt; | ||
| } |
There was a problem hiding this comment.
Can we have a small amount of padding here? Not sure why, but it seems to have none - at least on Fennec.
There was a problem hiding this comment.
Totally agree on this. Checkout the demo page now and see if that's better (clearing cache if necessary).
There was a problem hiding this comment.
This seems to have broken on 320x480: 
:(
* mobile stylesheet max-device-width changed from 750px to 768px to account for some tablets * footer: add horizontal padding and fix anchoring on 320x480 resolution * big link buttons: fix for some weird sizing on some resolutions
NB: A live preview of these changes is available at g7sweb.uwtb.net
Any additional recommended changes are requested.
Description (from commit message)
Changes for mobile:
font-size
mobile
Changes for desktop:
time!)
Global changes:
anticipation of links being added to the left side so that the links
will appear before the copyright notice on mobile