I am using the Gatsby/MUI starter as a boilerplate for my personal site. In my personal site, I am having the problem that all pages are rendering as slightly larger than the viewport size. This issue is consistent on mobile and laptop/desktop sized screens.
I am using MUI Grid. I have made sure that my meta viewport head element uses width=device-width
. As far as I can tell this does not depend on fixed-size elements or grid spacing options, such as margin or padding.
Does anyone have any debug suggestions or would anyone like to see a particular piece of information that would aid in the debug process? Site is available at https://errcsool.com
Update: If I get rid of all pages except for index, this problem occurs as soon as I place something inside of an MUI with spacing options <Grid container spacing={x}>
Solved. Adding a root div
element with padding
at least half of spacing pixels, so for spacing={8}
, the root div should have padding={32}
.
This is well-known functionality of Material-UI Grid.
Related to this issue.