How and where to access html body in gatsby

Question

I am having issue of large white spaces appearing on the right and the bottom of the web page. When testing for responsiveness of the web page.

I found a similar issues on stackoverflow

1. White space showing up on right side of page when background image should extend full length of page [closed]

2. Website has strange whitespace on right side of the page when the browser is resized to a smaller window

Solution in both the posts are same

html, 
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
}

I don't know where exactly to add this in the gatsby, I found a post with a similar issue to mine regarding gatsby How do I style the body / background?. Don't seem to understand what is the solution for this!

Found this post How to add a dynamic class to body tag in Gatsby.js? got some idea about using react-helmet, how exactly I can use it?

Could anyone explain how I can set the html body in gatsby, to avoid this large white space?

Resolution 1366x768 area under the bounder is the whitespace

Resolution 1920x1080 area under the bounder is the whitespace

Answer 1

To add global styles (such as the ones you're talking about), you have multiple ways to follow. The easiest one is to use gatsby-browser.js file. I will provide a solution for your use-case based on my paths, adapt it as you wish.

Create a global.css file in /src/styles/global.css and paste your code:

html, 
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
}

In your gatsby-browser.js file, import your global styles:

import './src/styles/global.css';

Basically, you are adding global styles using CSS files for your project.

There's a huge lack of details in your question but I guess that white part is the footer of the site. Since you don't have any content pushing the footer at the bottom of the page, it appears flexible as it could.

P.S: I've committed How to add a dynamic class to the body tag in Gatsby.js?'s solution since you don't need to add dynamic classes. To make the footer always sticky at the bottom of the browser, you need to make a few adjustments. Wrap your <Layout> with something like:

    import React from "react"
    
    import Navbar from "./navbar"
    import Footer from "./footer"
    import Sidebar from "./sidebar"
    
    import '/yourStyles.css'    

    const Layout = ({ children }) => {
      return (
        <section className="site-wrapper">
          <main>{children}</main>
          <Footer />
       </section>
     )
   }

   export default Layout

And add the following CSS (in your /yourStyles.css or in your global styles)

.site-wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main  {
  flex-grow: 1;
}

Basically, you are telling the wrapper (site-wrapper) to expand until filling the viewport (100vh). Since your main tag (change it to the desired class if needed) can grow free (flex-grow: 1) so your footer will be always at the bottom of the page because it's pushed by the rest of the flexbox column.