CODEWITHSUNDEEP
cssreactjsstyled-componentsbackground-color
eeman
eeman

Reputation: 15

White edges on React page, backgroundColor not covering edges

I've used Gatsby before a few years ago, and it's totally different now. Before I also didn't use styled-components, this time I'm trying to use styled components and skip the css/sass part.

You can see the image attached for the white edges I am referring to.

Any ideas on why this might be happening would be a great help too.

Just editting the basic landing page that gatsby comes with, I'm trying to add a black background to my website, like in dark mode. The problem is that white edges keep showing up on all 4 sides of the site. I've made margins 0, setting minWidth and minHeight to a 100% do not work and result in overflow, neither does fitContainer work (leaves the white edges). Setting the attributes to fill, contain and cover also do not work.

I want my background to cover all the edges, i.e cover the entire background of the site whilst not overflowing, remaining the size of the window it is open in.

Here is my styled-component: const pageStyles = { color: "#232129", backgroundColor: "black", backgroundSize: "fill", margin: 0, width: "100%", minHeight: "100%", padding: 96, fontFamily: "-apple-system, Roboto, sans-serif, serif", }

and this is where I'm using it const IndexPage1 = () => { return ( <main style={pageStyles}> .....

Upvotes: 0

Views: 573

Answers (1)

ray
ray

Reputation: 27245

Sounds like your page has the default margin on body and you just need to set it to 0. Here's a sample page where you can toggle body's margin between default and 0.

main {
  background: darkgrey;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  background: blue;
}

.no-margin {
  margin: 0;
}
<main>
  <button onClick="document.body.classList.toggle('no-margin')">Toggle Body Margin</button>
</main>

Upvotes: 1

Related Questions