You might've tried to apply overflow to the <body>
element. Overflow on the body has some special behaviour when the <html>
element has overflow: visible
. In that case, the body overflow is moved to the viewport.
Mobile devices can zoom out if the viewport overflows, so that the user can see all of the content. I think it's this zoomed-out view you're seeing in the DevTools.
Scrolling in two dimensions is often advised against, since there's a greater risk that the user misses parts of the page, but if you really want to force overflow on the body you can do so by also changing the overflow of the <html>
element to something other than visible
, e.g.
html,
body {
overflow-x: auto;
}
I think the CSS looks great! There are lots of different values in the design, which'll inevitable translate to lots of rules. The unit of the font sizes should be changed to rem
, though! That way, the user's font size settings are respected, which is important for accessibility.
If you don't want the browser defaults for headings you need to override them in some way. It sounds like you want the headings to inherit the value from their parents, which is totally possible:
h3 {
font-size: inherit;
}
Marked as helpful
@prchristie
Posted
@markuslewin Thanks a lot for the feedback!
As for the overflow, I was thinking mostly about when the screen gets extremely small. There is a certain point of auto scaling when the content stops being readable. Further, it seems that if I don't put a min width (meaning it won't scale horizontally I believe), then eventually the content overlaps and becomes unreadable as well. I imagine having a suitable min-width such that the content is always readable would be useful for people who are doing a multi-screen thing on their phone. Its better to have to scroll horizontally than to not be able to read the content at all :p.
I still have a lot to learn about when to use which unit, so thanks for the rem
tip! I'll start using rem for my font sizes now!
@prchristie Right, it definitely depends on how much you're ready to sacrifice the initial layout! 😄
I do think you can get pretty far by making sure content don't overlap and wraps when it needs to (e.g. flex-wrap: wrap
), and by reducing spacing.
I haven't used an extremely small screen myself, so I don't know what the UX usually looks like. I can imagine such devices have zoom features, or some sort of text-only mode, so that the users can adjust the page on their own.
I think that's the main drawback of forcing overflow on the body. Before doing that, users would visit the page and get the zoomed-in view with a horizontal scrollbar (because of <meta name="viewport" ... />
), with the option to zoom out. By forcing overflow, you remove that option!