[Support request] Remove space between header and content area

[Tim]

I would like to remove the space between the header and content area (grey background color).

I tried using css code provided on another support request, but it had no effect on the size of margin between header and content.

.entry-content {
margin-top: 0 !important;
}

.page-header, .sidebar .widget, .site-main>* {
margin-bottom: 0 !important;
}

Here is a link to my site:
https://www.nesteaglerock.com

Also, what would I add to the css to make it only on mobile.

Thank you!

[Ying]

Hi Tim,

Can you go to customizer > layout > container, and chooseone container as the content layout?

Let me know if that’s what you want 🙂

[Tim]

Almost. I would like it to only be on mobile, but I also want a 1 pixel divider line. So, I was thinking if I set the margin between the containers to 1px on mobile only, this would do it. What do you suggest?

[Tim]

Okay, so I changed back to separate containers and choose 1px for my space, and it’s perfect. How do I make it on mobile only?

[Ying]

Try this CSS:

@media (min-width: 769px) {   
    .separate-containers .site-main {
        margin-top: 0;
    }
}

[Tim]

Hi Ying,

It didn’t work.

[David]

Hi there,

your current CSS looks like this:

@media (min-width: 769px) {
    .separate-containers .site-main {
        margin-top: 1 !important;
    }
}

the margin-top value of 1 requires the units eg. 1px.

So change your CSS to this:

@media (min-width: 769px) {
    .separate-containers .site-main {
        margin-top: 1px !important;
    }
}

The only time you can omit the Units is when the value is 0

[Tim]

I wanted it to only affect mobile so I changed it to max-width: 768px and it worked like a charm! Thanks, again! Your support team and product are amazing!

[David]

Aah yes 🙂 Glad to hear its working !

[Author]

Posts