Possible to remove horizontal band at top and bottom of Genesis Sample theme?

[Doug]

I'm using Gutenberg with the latest version of WP, and the Genesis Sample theme.

At the very top and bottom of my site, above the first and below the last block, there's a band about 70p wide in the body background color.

I'm curious how difficult it might be to remove this.

In Inspect, it's labeled

<div class="site-inner" style="margin-top: 70px;">

Using Inspect I've changed the "margin-top" value to "0", to no effect.

So I'm wondering what controls that band and how it might be modified.

thanks
doug

https://apparentinsights.com/

[AnitaC]

I am not sure why it's there but if you put the !important statement along with your 0, it will remove it.

---

Need help with customization or troubleshooting? Reach out to me.

[Doug]

Thanks, Anita.

I tried putting the Div content in, but it didn't do anything.

However, back in Inspect, I found something that worked. Changing this 70 to 0.

element.style {
    margin-top: 70px;
}

Here's a screen of me trying that and it working:
https://drive.google.com/file/d/1xNB3DXCm40olYbgaOoePSolgiCm2WYHz/view?usp=sharing

However, when I did that in Customer > Additional CSS, it didn't do anything.

So I also tried ...

element.style {
    margin-top: 0px !important;
}

.element.style {
    margin-top: 0px !important;
}

and

#element.style {
    margin-top: 0px !important;
}

I'm not too familiar with how classes work, and the differences between using . or #. Do you know what I'm doing wrong with that code?

thanks
doug

[AnitaC]

The .site-inner has that 70px coded somewhere. To overrule it, you need to do it like I have it here.

.site-inner {
    margin-top: 0 !important;
}

---

Need help with customization or troubleshooting? Reach out to me.

[Doug]

Thanks, that worked!

[Author]

Posts