Header obscures content on mobile

[briggySmalls]

Currently the Skin Deep header floats above content. On a larger screen this is fine as it only covers a small amount of vertical height. On mobile this is more pronounced, and can hide the title of articles in the featured slider. Either the header bar should dock, or blank content should be inserted to the top of the page.

[jerome-toole]

So what we need is for the header to be positioned static (inside the content flow) so that the rest of the page starts below it and then when the user scrolls, it changes to fixed.

If you only do this, you'll find that there is a jump as the header is removed from the flow and the space it took up is filled by the rest of the page. This page has a script that will make a ghost copy of the header which remains in the page flow to stop the rest of the page jumping up: http://imakewebthings.com/waypoints/shortcuts/sticky-elements/

You may need to grab the script from element inspector>sources as I don't think there's a download link.

Working example here: http://idler.co.uk/

J

On Sun, Jan 22, 2017 at 8:38 PM, briggySmalls notifications@github.com wrote:

Currently the Skin Deep header floats above content. On a larger screen this is fine as it only covers a small amount of vertical height. On mobile this is more pronounced, and can hide the title of articles in the featured slider. Either the header bar should dock, or blank content should be inserted to the top of the page.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/jerome-toole/skindeep/issues/11, or mute the thread https://github.com/notifications/unsubscribe-auth/AFRZO9CUmW6EXbgNhuBKqrKXJurUGoHlks5rU75DgaJpZM4Lqftn .

-- 07963714722 @ http://twitter.com/jamronejamrone design.jerometoole.co.uk

[jerome-toole]

what's the situation with this?

[briggySmalls]

This is mainly done.

It turns out this issue was not solved by the sticky masthead. In fact the featured slider had text that was far too large. Commit https://github.com/jerome-toole/skindeep/commit/eb80adb84a4d249a5f3c55b5530c4ddf384966d6 fixed the styles that already existed, but were not specific enough to apply, that hid the description text, reduced the font size and added one to widen the area the text could be displayed.

The only issue is that now on mobile the facebook, twitter, instagram icons don't necessarily line up, with two across and one broken onto the next line.

[jerome-toole]

Ok so now the site-header is not aligned because it isn't a flex item.

for that:

div#site-branding {
  display: flex;
}

I think.

Also, try on a tablet kind of size and the site-branding sits in the middle instead of on the left. Maybe take away the align-items attribute?

[briggySmalls]

Sorry. That was shoddy of me. Now what do you think?

[jerome-toole]

My teacher in primary school used to write 'Shoddy' on all my homework in red pen. #scars

Anyway, it's almost there but on mobile, the logo isn't aligned vertically and hits the bottom. The .wrapper just needs some top/bottom padding:

@media screen and (max-width: 990px)
responsive.css?ver=4.4.7:691
.wrapper {
-  padding: 0px 10px;
+  padding: 5px 10px;
}