Search code examples
cssflexboxmaterial-uigatsbystatic-site

Why does my Gatsby/Material-UI site render slightly larger than the viewport?


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

My code is available here

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}>


Solution

  • 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.