Support » Theme: Storefront » Is it possible to reduce padding/white space in column blocks?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter boppar

    (@boppar)

    Update.

    It seems like this code party reduces the bottom padding of the column (but there is still to mych padding);
    .wp-block-columns {
    margin-bottom: 0 !important;
    }

    I found this code below. It does something with the cover blocks, like a zoom-out. I doesn’t get this part “.wp-block-column p”. Any ideas?
    .wp-block-column p {
    margin-bottom: 0.5em !important;
    }

    Still struggling reduze the gap between the columns. Any suggestions?

    Hi @boppar,

    Thanks for reaching out us about reducing the spacing on the homepage. I’ve had a look at the site and noticed that there’s two places where the margins need to be reduced that’s a little different than the code you found, as I found a different code that involves reducing the margins for two separate blocks.

    Can you please try adding this code to your site:

    
    /* Fix homepage block spacing issue  */
    #post-536 > div > div.wp-container-10.wp-block-group.alignfull.align-fullwidth-custom.has-background > div > div.wp-block-columns.has-white-background-color.has-background .wp-block-column, #post-536 > div > div.wp-container-10.wp-block-group.alignfull.align-fullwidth-custom.has-background > div > div.wp-block-columns.has-white-background-color.has-background .wp-block-columns {
        	margin-bottom: 0!important;
    }
    

    I’ve made an exception here and customized the code a bit for your site, so it’s little longer than the usual code. The reason for that is because the margins get reduced on all the blocks otherwise and because those already have the correct spacing, they end up with no spacing at all. So I’ve set the code to only apply to the section you shared in the screenshot.

    Here’s what the spacing looks like before the code above was added to the site:

    WP.org SF - Hangmattor - Block spacing issue before
    Link to image: https://d.pr/i/qWQIU6

    And here’s what the spacing above looks like after the code was added:

    WP.org SF - Hangmattor - Block spacing issue fixed
    Link to image: https://d.pr/i/K8sxpZ

    Does that work for you?

    Thread Starter boppar

    (@boppar)

    Hi @wpniall

    Unfortunately it didn’t work.

    Hi there,

    Thanks for getting back to us.

    Can you please try to use the following CSS code instead?

    .home .wp-container-22.wp-block-columns {
        margin-bottom: 0 !important;
    }
    
    .home .wp-container-24 {
        padding-bottom: 0;
    }
    
    .home .wp-container-23.wp-block-column.is-vertically-aligned-top {
        margin-bottom: 0 !important;
    }

    Let me know how it goes!

    Best,

    Thread Starter boppar

    (@boppar)

    Hi @daniyalahmedk

    It didn’t work. Nothing changed.

    Hi there @boppar

    Could you try the CSS code below:

    
    .home .hentry .entry-content .wp-block-columns .wp-container-24.wp-block-column,.home .hentry .entry-content .wp-block-columns .wp-container-23{
      margin-bottom:0 !important;
    }
    

    Be sure to clear cache and minified CSS before testing it again. 🙂

    Thread Starter boppar

    (@boppar)

    Hi @kaushiksomaiya

    Thanks a lot. It worked as a charm.

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