- This topic has 11 replies, 2 voices, and was last updated 3 years, 3 months ago by Leo.
-
AuthorPosts
-
December 4, 2020 at 8:46 am #1567508nik9
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 screenshotsCurrent: https://ibb.co/MkP9pR5
Goal: https://ibb.co/41517SkBut 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
December 4, 2020 at 11:58 am #1567761LeoStaffCustomer SupportHi there,
Can you try using
generate_before_main_content
instead?December 4, 2020 at 1:05 pm #1567841nik9Hi Leo,
Hmm.. still same problem. π With this hook, the content is still in the same div i guess.
December 4, 2020 at 6:15 pm #1567990LeoStaffCustomer SupportAhh 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.
December 5, 2020 at 4:48 am #1568284nik9Hi 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; } }
December 5, 2020 at 11:12 am #1568681LeoStaffCustomer SupportI 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; } }
December 7, 2020 at 1:58 am #1570069nik9Hi 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?
December 7, 2020 at 8:57 am #1570591LeoStaffCustomer SupportI edited the CSS here:
https://generatepress.com/forums/topic/overwrite-divcontent-paddings-for-special-content/#post-1568681Can you give it a shot?
December 7, 2020 at 2:47 pm #1570908nik9Hi 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…
December 7, 2020 at 5:19 pm #1570995LeoStaffCustomer SupportIβ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; }
December 7, 2020 at 6:13 pm #1571031nik9Thanks Leo! Perfect! π
Cheers
December 7, 2020 at 6:53 pm #1571045LeoStaffCustomer SupportNo problem π
-
AuthorPosts
- You must be logged in to reply to this topic.