Archived topic
Remove space between header and content area
8 replies · Started by Tim on July 29, 2022
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!
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 :)
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?
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?
Try this CSS:
@media (min-width: 769px) {
.separate-containers .site-main {
margin-top: 0;
}
}Hi Ying,
It didn't work.
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
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!
Aah yes :) Glad to hear its working !
