search

writethedocs / www

The main website for Write the Docs.
http://www.writethedocs.org
Other
1.32k stars 510 forks source link

Text overflow on smaller screens #1931

Closed ironnysh closed 1 year ago

ironnysh commented 1 year ago

Hi there, When browsing the site on an iPhone SE (320 pixels wide), I noticed the text overflows and creates a horizontal scroll.

The culprit is the min-width CSS property on the body class (defined in basic.css that's imported in alabaster.css):

div. body {
min-width: 450px;
}

overflow

Removing this line, or setting a narrower minimum width (preferably using responsive units, such as em, rem, or ch) solves the problem: no-overflow

plaindocs commented 1 year ago

Hey @ironnysh thanks for reporting!

@ericholscher @goatlady can we safely delete this? Or if not what minimum width should we be setting?

goatlady commented 1 year ago

I agree that min-width shouldn't be fixed at 450px - I would expect that would be overridden in a breakpoint below 450px. Just removing it does cause some issues with the footer, looks like there's some kind of scaling that kicks in below a certain size, so perhaps setting min-width: 320px would fix the immediate issue on mobile and we can test further?