search

gvwilson / tidyblocks

A blocks-based interface for tidy data manipulation and analysis.
Other
82 stars 28 forks source link

website theme not usable on mobile / narrow screens #423

Open evanwill opened 4 years ago

evanwill commented 4 years ago

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 commented 4 years ago

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