Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

website theme not usable on mobile / narrow screens #423

Open
evanwill opened this issue Sep 8, 2020 · 1 comment
Open

website theme not usable on mobile / narrow screens #423

evanwill opened this issue Sep 8, 2020 · 1 comment
Assignees

Comments

@evanwill
Copy link

evanwill commented Sep 8, 2020

Trying to read the blog on my phone I noticed the website theme doesn't scale on mobile screens resulting in a tiny narrow text block, and the nav elements overlapping (this might not be a priority since the block editor is aimed at desktop, but it still seems helpful for the blog and website to be mobile friendly for folks looking for information).

The text block issue seems to be from styles on .jekyllBody main in "/static/sass/jekyll-site.scss", which set margin-left: 15rem; margin-right: 15rem;. That results in an extremely narrow text column on mobile.
I am not familiar with everything this CSS is styling, but it seems that you could add a media query to only add the margin on larger screens. However, looks like there is a side nav in some pages that this margin is making space for--that side nav is also not currently usable on mobile.

When the nav bar collapses on smaller screens to multiple lines, there isn't enough space between elements to reliably click on them, and the dropdowns don't exactly work. It seems they need more padding or line height on mobile.

thank you!

@MayaGans
Copy link
Collaborator

MayaGans commented Sep 9, 2020

Thanks for this note! I'll be sure to edit all our css to percentages so it can scale for mobile

@MayaGans MayaGans self-assigned this Sep 9, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants