[Resolved] Overwrite div#content paddings for special content

Home Forums Support [Resolved] Overwrite div#content paddings for special content

Home Forums Support Overwrite div#content paddings for special content

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1567508
    nik9

    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

    #1567761
    Leo
    Staff
    Customer Support

    Hi there,

    Can you try using generate_before_main_content instead?

    #1567841
    nik9

    Hi Leo,

    Hmm.. still same problem. πŸ™ With this hook, the content is still in the same div i guess.

    #1567990
    Leo
    Staff
    Customer Support

    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.

    #1568284
    nik9

    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;
     }
    }
    #1568681
    Leo
    Staff
    Customer Support

    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;
        }
    }
    #1570069
    nik9

    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?

    #1570591
    Leo
    Staff
    Customer Support
    #1570908
    nik9

    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…

    #1570995
    Leo
    Staff
    Customer Support

    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;
    }
    #1571031
    nik9

    Thanks Leo! Perfect! πŸ™‚

    Cheers

    #1571045
    Leo
    Staff
    Customer Support

    No problem πŸ™‚

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.