Closed thth closed 3 years ago
@thth I am unable to test this since I don't own a windows computer right now, do you mind uploading a screen recording with the "after" version of the site?
Here's after:
and for reference, here's what the pagination looks like before when scrolled to the right: (note the right side)
stackoverflow on the issue
css-tricks article on the full width technique; some of the comments go into the scrollbar issue
Currently, the css for lesson pagination uses
width: 100vw
(.w-screen
) to achieve full screen width as a child of a limited-width (.container
) parent.https://github.com/elixirschool/school_house/blob/b8b5ed30c47d59250ab7f7cbc29c61d418741732/lib/school_house_web/templates/lesson/_pagination.html.heex#L1
The problem with
100vw
is that it only works on browsers that overlay scrollbars atop the page (e.g. macOS, mobile browsers). On browsers that fit a scrollbar beside the page (e.g. Windows), the presence of a vertical scrollbar will result in the100vw
element being wider than the page, causing an unseemly horizontal scrollbar.This is just a "quick fix" that puts
overflow-x: hidden
onbody
, which should be fine so long as the website doesn't allowbody
to ever be wider than the screen (Elixir School's current layout doesn't).