Search code examples
cssreactjsreduxmaterialize

Can't get my React app to fill the screen

No matter what I've tried I cannot get the #root div in my react app to fill the whole screen. It will leave a significant portion of space above and to the left of the #root tag where all the compiled react code is being displayed.

Here is a link to the repo, I would imagine that the issue lies in the ./public/index.html file or the ./src/app.js or ./src/index.js.

https://github.com/dmshakur/fitness_plan

I've tried to add css styling to the html and body tags, as well as the #root tag and the .app class that are defaulted when using create-react-app. I've tried using height and width with both 100vh/vw and 100% on both.

I wanted to figure this out on my own, but it just will not work and it is consuming too much time.

Solution

  • Culprit is body tag. There is a padding of 5em coming on it. enter image description here

    Culprit file is src/pages/Welcome/Welcome.css you have

    body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  font-size: 62.5%;
  background: #dadada;
  font-family: "Open Sans", sans-serif;
  line-height: 2;
  padding: 5em;
}

    removing this padding fixes the issue.

    body {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
      font-size: 62.5%;
      background: #dadada;
      font-family: "Open Sans", sans-serif;
      line-height: 2;
}

    I will suggest you remove the styling on the body tag directly and make a specific class which you can add to a div.