Could really use some help with background colors in HTML and CSS #21408

DanielGrayPet · 2022-05-10T16:35:23Z

DanielGrayPet
May 10, 2022

Hi,

I have trouble understanding why I have such big white strips on the sides of my page (Pic attached). I’ve tried looking for a fix a while now but nothing seems to really work. Couldn’t find anything in my code that might cause this too.

Appreciate any help.

Answered by DanielGrayPet

May 12, 2022

Found the solution to my problem. Thanks for anyone trying to help.
I created a global.css stylesheet and implemented it correctly this time to gatsby-browser.jsx.
You need to restart the development server after creating gatsby-browser.jsx so that’s why it didn’t show yet.
Thank you all.

View full answer

jdevfullstack · 2022-05-11T05:00:55Z

jdevfullstack
May 11, 2022

if that is a public project, you can send the direct link, it’s best, so we can take a closer look

0 replies

DanielGrayPet · 2022-05-11T13:35:38Z

DanielGrayPet
May 11, 2022
Author

It’s not a public repository. Any other way I could send relevant snippets of the code?

0 replies

jdevfullstack · 2022-05-12T01:33:24Z

jdevfullstack
May 12, 2022

screenshots will do and pasting of code here

0 replies

DanielGrayPet · 2022-05-12T13:17:36Z

DanielGrayPet
May 12, 2022
Author

index.js ← the page that is in the screenshot

import * as React from "react"
import Layout from "../components/Layout"
import { container, heading1, body1, heading2, picturelist, picturedo, html, body } from "../components/index.module.css"
import { StaticImage } from "gatsby-plugin-image"
const HomePage = () => {

return (

<>

<html className={html}>

<Layout pageTitle="Homepage"></Layout>

<body className={body}>

<div className={container}>

<h1 className={heading1}>What We Do</h1>

<body>

<p className={body1}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis mi ac tellus rhoncus, sit amet efficitur lorem viverra. Nam augue justo, posuere eu mi ut, aliquam auctor enim. Praesent nisi tortor, facilisis vestibulum massa eu, lobortis cursus metus. Ut iaculis pulvinar rhoncus. Praesent consectetur felis a orci aliquet, faucibus eleifend enim rhoncus. Curabitur vitae tellus eu ligula auctor facilisis. Nulla venenatis vehicula tortor, sed hendrerit enim maximus sed. Sed id malesuada odio, dapibus finibus ligula. Fusce rhoncus, eros sit amet feugiat maximus, dui nisi commodo eros, eu ultricies leo nulla eget metus. Nunc vel nisl at diam dapibus ultrices et nec sem. Nulla facilisi.</p>

</body>

</div>

<div className={container}>

<h2 className={heading2}>Sneak Peek</h2>

<body>

<ul className={picturelist}>

<li className={picturedo}><StaticImage src= "../images/image4.jpg" alt="silly" placeholder="blurred"></StaticImage></li>

<li className={picturedo}><StaticImage src= "../images/image6.jpg" alt="silly" placeholder="blurred"></StaticImage></li>

<li className={picturedo}><StaticImage src= "../images/image5.jpg" alt="silly" placeholder="blurred"></StaticImage></li>

</ul>

</body>

</div>

</body>

</html>

</>

);

}
export default HomePage

index.module.css ← the css module for the index page

.container{
    background: ghostwhite;
    font-size: 20px;
    padding: 10px;
    border: 1px solid lightgray;
    margin: 10px;
}
.heading1{
    color: rgb(0, 34, 102);
    text-align: center;
    font-size: 48px;
}
.body1{
    color: darkblue;
    text-align: center;
    font-size: 24px;
}
.heading2{
    color: rgb(0, 34, 102);
    text-align: center;
    font-size: 48px;
}
.picturelist{
    align-items: center;
    justify-content: center;
    display: flex;
    list-style: none;
    padding-left: 0;
}
.picturedo{
    height: auto;
    width: auto;
    padding: 60px 120px;
}
.html{
    background: #11001A;
    background: -moz-linear-gradient(45deg, #11001A 0%, #00004D 70%, #000000 100%);
    background: -webkit-linear-gradient(45deg, #11001A 0%, #00004D 70%, #000000 100%);
    background: linear-gradient(45deg, #11001A 0%, #00004D 70%, #000000 100%);
}
.body{
    min-height: 100%;
    min-width: 100%;
    margin: 0px;
}

global.css

html {
    background: #11001A;
    background: -moz-linear-gradient(45deg, #11001A 0%, #00004D 70%, #000000 100%);
    background: -webkit-linear-gradient(45deg, #11001A 0%, #00004D 70%, #000000 100%);
    background: linear-gradient(45deg, #11001A 0%, #00004D 70%, #000000 100%);
}

gatsby-browser.js

const React = require("react")
const Layout = require("./src/components/layout")
// Logs when the client route changes

exports.onRouteUpdate = ({ location, prevLocation }) => {

console.log("new pathname", location.pathname)

console.log("old pathname", prevLocation ? prevLocation.pathname : null)

}
// Wraps every page in a component

exports.wrapPageElement = ({ element, props }) => {

return <Layout {...props}>{element}</Layout>

}
//import stylesheet

import "./src/styles/global.css"

0 replies

DanielGrayPet · 2022-05-12T14:23:41Z

DanielGrayPet
May 12, 2022
Author

Found the solution to my problem. Thanks for anyone trying to help.
I created a global.css stylesheet and implemented it correctly this time to gatsby-browser.jsx.
You need to restart the development server after creating gatsby-browser.jsx so that’s why it didn’t show yet.
Thank you all.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

Could really use some help with background colors in HTML and CSS #21408

{{title}}

Replies: 5 comments

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

GitHub Community

Could really use some help with background colors in HTML and CSS #21408

DanielGrayPet May 10, 2022

Replies: 5 comments

jdevfullstack May 11, 2022

DanielGrayPet May 11, 2022 Author

jdevfullstack May 12, 2022

DanielGrayPet May 12, 2022 Author

DanielGrayPet May 12, 2022 Author

DanielGrayPet
May 10, 2022

jdevfullstack
May 11, 2022

DanielGrayPet
May 11, 2022
Author

jdevfullstack
May 12, 2022

DanielGrayPet
May 12, 2022
Author

DanielGrayPet
May 12, 2022
Author