Various responsive CSS fixes

hotosm / learnosm

LearnOSM.org content, Jekyll layouts & issue tracking. This repository is dedicated to helping people learn how to map in OpenStreetMap (OSM) and use many of the software and tools in the OSM community.

http://learnosm.org

MIT License

247 stars 189 forks source link

Various responsive CSS fixes #596

Closed todrobbins closed 4 years ago

todrobbins commented 4 years ago

Hi there!

Looks like a lot of the responsive design was already in the codebase but was obscured by some invalid CSS in style.css. This PR addresses the discussion in #595

I've fixed a number of things, including:

the homepage
the mobile top banner
the mobile doc-nav
the footer
fixed the z-index of the side banner
added some clarifying style to the language and quick access menus (including a cursor: pointer)
adding :focus highlighting for the search box

Here's a few screen grabs:

todrobbins commented 4 years ago

@Nick-Tallguy I still haven't found out the cause of the duplicate menu item/broken link issue, and on my local dev environment it looks and behaves normally. So perhaps it's a GitHub Pages issue?

Screen Shot 2020-02-12 at 1 05 01 PM

Screen Shot 2020-02-12 at 1 07 15 PM

Nick-Tallguy commented 4 years ago

I've run this locally, and everything is working extremely well on my laptop - I'm intending to pull this in shortly unless I hear otherwise. I can't test on my mobile phone, but I have tested the staging site on my mobile phone and that is working perfectly now.

Extremely good job thanks.

Nick-Tallguy commented 4 years ago

closes #595