If you're doing customization work on the Divi Theme's header, you may find you need to adjust the top padding of the page-container div element, in order to move the rest of the page content up or down. It's relatively easy to adjust this padding, but it is not entirely obvious how to do so, so here are some examples of CSS selectors for targeting the #page-container's top padding:
/* posts and pages */
.single #page-container, .page #page-container {
padding-top:10px !important;
}
/* homepage */
.home #page-container {
padding-top:10px !important;
}
@media only screen and ( max-width:981px ) {
/* mobile posts and pages */
.single #page-container, .page #page-container {
padding-top:10px !important;
}
/* mobile homepage */
.home #page-container {
padding-top:10px !important;
}
}
I've used the "home", "single" and "page" classes of the body element to target the homepage, posts and pages respectively.
I've used a media query to trigger mobile-specific padding when the page width falls below 981px (you may want to play around with the width at which your mobile-specific padding kicks in, but 981px is the point at which Divi stops using a floating header).
Finally, I've added !important to all the padding rules to make sure the browser uses our rules instead of the default top-padding set by Divi which would otherwise take precedence (as it is set using inline CSS).
Hi Dan, is it possible to target only posts and not pages? How can I differentiate between them, in short? I need to change margin/position for my posts but keep pages untouched.
I second putting something like that in the plugin, too :))
Thanks in advance
Stefano
Hey Stefano, you can target posts only using the ".single" class. So, for example, the above code modified to apply to posts only would be:
/* Adjust page container padding on posts */ .single #page-container { padding-top:10px !important; } @media only screen and ( max-width:981px ) { .single #page-container { padding-top:10px !important; } }I've removed the bits targeting the homepage (".home") and pages (".page").
I'll definitely try to add this into a future version of the plugin. Thanks!
Great tip. I think it relates to an issue I am having with a project I'm working on. Divi for some reason calculates top padding for the page and ends up pushing all my content down. I have tried everything I could think of off the top of my head, and no luck. Any ideas? Thanks!
I uploaded some screens of what I'm talking about :)
https://imgur.com/a/jlmd5
Hi Rob, it looks like the top padding is being set on the full-width header module itself, in response to the page container padding. If you're able to provide a link to a page showing the problem I might be able to figure out exactly what's going on / how to properly fix it. One workaround would be to manually override the padding on the header by adding something like this:
.et_pb_fullwidth_header_0 { padding-top: 0 !important; }to the per-page Custom CSS box (which you'll find from the three-lined "hamburger" menu at the top right of the Divi Builder box on the edit screen for the affected page).
Is this a setting in Divi Booster? If not, why not?
Love the plugin! Thanks.
Hi Mike, it looks like I missed adding this one into the plugin somehow. I'll try to correct that as soon as possible. Thanks!
Hi, I am looking for information on whether there is a way to reduce the container margin on mobile phones, but on the sides as opposed to the top.
Originally I thought it would be an option, similar to the gutter width option, but that only changed the row gutters.
I know, I can change it with CSS, but I don't know what else it may affect. If there's no built-in option, then I will just go a CSS edit and then see what happens. Any ideas?
Hi Luke, I don't think there is any option in Divi to control this. I've just been playing around with it and have come up with this:
https://divibooster.com/changing-the-website-content-width-on-mobiles/
As you'll see from the post, I've used CSS to change the width (which also adjusts the visible margins. I've restricted the selectors to only those needed to minimize any unwanted effects, and as the content within these container elements doesn't rely on the width (that I know of), I think it should all behave correctly. It seems to during my testing, but let me know if you notice anything untoward.
It'll be included in the next version of Divi Booster (2.4.6), which I'll hopefully get out in the next week or so.