Easy (Horizontal Scrollbar) Fixes for Your Blog CSS
The article provides solutions for fixing horizontal scrollbars on blogs, particularly for small viewports. It highlights common issues with preformatted blocks, images, and tables that can cause overflow. The author shares practical CSS fixes to enhance accessibility and improve user experience.
- ▪Horizontal scrollbars can detract from the user experience on small screens.
- ▪The article suggests using 'overflow-x: auto;' for preformatted blocks to manage overflow.
- ▪Images should have a maximum width of 100% to prevent them from exceeding their container.
Opening excerpt (first ~120 words) tap to expand
Easy (Horizontal Scrollbar) Fixes for Your Blog CSS By Artyom Bologov <div class=note> <p> Oh, I see you disabled JavaScript. Keep up the good work, my fellow cleanweb person! <p> Notice that there might be trace amounts of JS, used for e.g. runnable JS code blocks and interactive demos. JS is not required for use of the website though, it’s only enhancing the existing functionality. </div> So it often happens that I find some blog post. A fun one. A freaky one. A profound one. A critical (in the sense of Critical Science, not everyday criticism!) And then I see my arch nemesis: The Horizontal Scrollbar. Creeping in when no one sees, on smallest screen widths.
…
Excerpt limited to ~120 words for fair-use compliance. The full article is at Artyom Bologov.
Discussion
0 commentsMore from Artyom Bologov
