A website must not show horizontal scrollbars on small screens. Content must fit within the screen width. This ensures a good user experience on mobile devices.
By Pawan Nayar · from the LLOS AI Learning record
A website must not show horizontal scrollbars on small screens.
Content must fit within the screen width. This ensures a good user experience on mobile devices.
A developer must test the website at 360, 390, and 412 pixels wide. These are common small screen sizes. The `html` and `body` elements should have `max-width: 100%` and `overflow-x: hidden`. This stops horizontal scrolling for the whole page. All grid layouts should use `minmax(0, 1fr)` for column tracks. This makes grid items shrink correctly. Long words in interactive elements should break to the next line. Use `word-break: break-word` for this. For screens smaller than 619 pixels, some content should be hidden. This includes navigation paths and extra statistics. Buttons should only be as wide as their content. They must not stretch to fill the full screen width.
A developer builds a new web page. On a phone, the user sees a horizontal scrollbar. The developer checks the page at 360 pixels wide. A long word in a button causes the overflow. The developer adds `word-break: break-word` to the button's style. The scrollbar disappears.
More from the same record, pulled by shared topic — not written new for this page.
A button should only be as wide as its text and the space around the text. This is called content-sized.
A `position: fixed` element stays in the same spot on the screen, even when the user scrolls. Its `top` value is measured from the top of the screen.
A developer should give the map wrapper `position: relative` and `z-index: 1`. This creates a stacking context.
A developer can set the parent element's CSS `position` to `relative`. This allows child elements with `position: absolute` to move within the parent.
A website must not show horizontal scrollbars on small screens. Content must fit within the screen width. This ensures a good user experience on mobile devices.