Archived topic
Overwrite div#content paddings for special content
11 replies · Started by nik9 on December 4, 2020
Hi there,
I'm wondering how to adjust the following CSS code. We use a shop info slider banner which is hooked in via elements and is displayed on all archive pages.
Currently we add the stuff via elements and use the hook generate_before_content. It looks good.
But we want to remove the padding on tables and smartphones. But when we remove the padding from div#content then the whole content has no padding. We only want no padding for this slider. You can see this in the screenshots
Current: https://ibb.co/MkP9pR5
Goal: https://ibb.co/41517Sk
But if we remove the padding from the div#content then you can see in picture 2 that there is no padding for the whole other content. And this is not nice. So how can we adjust this?
I guess the problem is, that our hook is inside the div#content but how can we add this outside or adjust this via CSS? :)
Cheers
Hi there,
Can you try using generate_before_main_content instead?
Hi Leo,
Hmm.. still same problem. :( With this hook, the content is still in the same div i guess.
Ahh it's still within the content container as you are using the one container layout.
I wonder it would work if you use the separate container layout with 0 separating space?
https://docs.generatepress.com/article/content-layout/
If not the only other solution I can think of is to put the slider above both the content and sidebar.
Hi Leo,
Good Idea! Now I changed the setting to seperate container. Now its working. But, I have still a margin-top from 40px. This is coming from .separate-containers .site-main. If I set this to 0 then I will not have any margin on any page.. this is not was we want.
Currently I use this hack here. With that, I make sure that only on smartphone and tablet no top margin is set. But I'm not sure if this is a good solution.
@media (max-width: 768px) {
div#n2-ss-23 {
margin-top: -40px;
}
}I would go with this instead:
@media (max-width: 768px) {
.separate-containers .site-main {
margin-top: 0;
}
.separate-containers .site-main > .n2-section-smartslider {
margin-bottom: 0;
}
}Hi Leo,
Perfect!
Now I only have a little last issue. https://ibb.co/3CQtTqZ
The space between the banner and content is now to big. It's 40px margin. How can I change this to 0 only on archive page. Becasue I do not want to have no margin on other pages. Or is that not a issue?
I edited the CSS here:
https://generatepress.com/forums/topic/overwrite-divcontent-paddings-for-special-content/#post-1568681
Can you give it a shot?
Hi Leo,
Yes, works.. but not 100%.. there is still a padding-top with 40px from .inside-article class. I tried to remove this via this:
.separate-containers .site-main > .inside-article {
padding-top: 0px !important;
}But no success. I'm not sure if it is possible to just remove the padding-top on shop archive. When I use only .inside-article { padding-top: 0px !important; } is has a effect on all pages. I guess this 40px are needed. If we remove them from each page then we have no space between header and content. Whats your thoughts about this?
P.s: I know that I can adjust this 40px seting in customizer.. but thsi has effect on all pages...
I’m not sure if it is possible to just remove the padding-top on shop archive.
Try this:
body.archive.post-type-archive-product .inside-article {
padding-top: 0;
}Thanks Leo! Perfect! :)
Cheers
No problem :)
