Site logo

[Resolved] Remove padding for .wp-block-group__inner-container

Home Forums Support [Resolved] Remove padding for .wp-block-group__inner-container

Home Forums Support Remove padding for .wp-block-group__inner-container

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #2452201
    Oleksiy

    Hi guys,

    Just opened a post published this summer. And suddenly noticed huge spaces between blocks that were absent before. Probably spaces appered after one of the GP updates. It’s because of paddings for the group block. .wp-block-group__inner-container class is guilty. I’ve used a lot of group blocks for a semantic markup purpose – to use <section> tag. And now I have an awful shift of content.

    This CSS doesn’t work:
    .wp-block-group .wp-block-group__inner-container {
    padding: 0 !important;
    }

    Could you please help to clarify, where this issue came from and how to fix it?

    #2452208
    Oleksiy

    Update.

    .site-main .wp-block-group__inner-container {
    padding: 0 !important;
    }

    works for mobile, but not for desktop

    #2452224
    Leo
    Staff
    Customer Support

    Hi there,

    I can’t see how that code would only work for mobile.

    Can you disable Autopimize so I can see the full CSS you’ve added so far?

    Perhaps there is a @media (max-width: 768px) { above that’s not closed with }?

    #2452700
    Oleksiy

    Hi Leo,

    Thank you for response.
    Disabled CSS files aggregation in Autoptimize. Now it’s possible to check each file separately.
    Yes, I was thinking about @media, but haven’t found issues with it in the style.css in the child theme or additional CSS in Customizer after a fast check. Maybe issue is with a code generated by blocks.

    #2452810
    David
    Staff
    Customer Support

    Hi tehre,

    in your CSS i see you have this:

    
    /* Full width related posts */
    @media(max-width: 767px) {
    	.al-related-posts {
    		margin-left: calc(-100vw / 2 + 100% / 2);
    		margin-right: calc(-100vw / 2 + 100% / 2);
    		max-width: 100vw;
    		width: auto;
    	}
    
    ****** MISSING CLOSING BRACKET ******
    
    /* Border radius for post images */
    @media(min-width: 769px) {
    	.type-post img {
    		border-radius: 8px;
    	}
    }

    I marked where ****** MISSING CLOSING BRACKET ****** ie. } should be.
    Every bit of CSS below that is effectively inside the @media(max-width: 767px) { media query.
    Add the bracket to fix that.

    #2452916
    Oleksiy

    Damn, you are right. Missed it.
    Thanks a lot, David. Sorry for wasting your time to fix my mistake.

    #2454252
    David
    Staff
    Customer Support

    No problem – glad to be of help!

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