Trying to reduce paddings between blocks.

Howdy @boppar ??

Thank you for contacting Woo support!

Trying to reduce paddings between blocks.

My suggestion would be to create a unique CSS class first, for the column block, like?.10t_column_spacing.

Subsequently, apply some custom CSS, targeting the following:

• .wp-block-columns?{margin-bottom: 0.75em;}
• h3?{margin: 0 0?0.1em;}

With the first of the two aiming to reduce the bottom margin of the columns, and the second the margin below H3 headers in the columns.

I trust that points you in the right direction, but if you have more questions, let us know.

We’re happy to help.

Hi @anastas10s

Thanks for replying. Your advice sounds promising.

I’ve been searching for CSS that will work. Unfortunately I havn’t managed to create a working CSS. Any idea?

Howdy @boppar ??

I’ve been searching for CSS that will work. Unfortunately I havn’t managed to create a working CSS. Any idea?

Could you share the code you have on this, so far?

For reference, take a look at the last line of CSS, for margin-bottom, in the bottom right of the following screenshot:

I hope that helps!

Hello @anastas10s

I tried without success this code:

.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;
}

Hej @boppar ??

I tried without success this code

Thank you for sharing the code you are trying with.

I recommend checking out this page first, for targeting specific pages, and writing concise CSS.

With that information as the basis, feel free to target the .page-id-536 .wp-block-columns classes, and adjust the margin-bottom to the required value.

My recommendation would be to avoid 0 margins, as they might cause display issues in different viewports (screen sizes).

Thanks @anastas10s

I tried but had no success.

Hej @boppar

I tried but had no success.

Could you share the code you are trying with, again, please?

I am trying with the following, and it works as expected:

Cheers!

Hej @anastas10s

Thanks a lot.

.page-id-536 .wp-block-columns {
	margin-bottom: 0.05em;
	:;
}

The code works partly as I want. It reduces the space between the two double columns, e.g the space between singel/dubbel and familje/h?ngstolar is reduced.

However when on mobile they are stapled on each other and the space between the singel and dubbel (and also between familje and h?ngstolar) isn’t reduced. Like singel – large space – dubbel – small space – familje – large space – h?ngstolar – large space.

How can I reduce the space between singel and dubbel (and also between familje and h?ngstolar)?

Hi @boppar

I understand that you’re experiencing an issue with your CSS code where the spacing between your columns isn’t behaving as expected on mobile devices. This is likely due to the responsive nature of your theme, which adjusts the layout based on the screen size.

To fix this, you can use a CSS media query which specifically targets small screen sizes. Here’s the updated that you can use:

.page-id-536 .wp-block-columns {
     margin-bottom: 0.05em;
}
 @media only screen and (max-width: 480px) {
     .page-id-536 .wp-block-columns {
         margin-bottom: 0.01em !important;
    }
     .page-id-536 .wp-block-heading {
         margin-bottom: -0.99em !important;
    }
}

Please try this solution and let us know if it works for you or if you have any other questions. Thanks!

Hi @shameemreza
Thanks for helping out.

Here is an image to explain what I write below:
https://ibb.co/hH45PtB

I tried your code like you wrote.
The result was:
The heading “Kategorier” disappeared.
It reduzed the space between the columns. Different spaces.

The space between heading Dubbelh?ngmattor and the image Familjeh?ngmattor needs to be bigger. I changed 0.01em to 2em:

     .page-id-536 .wp-block-columns {
         margin-bottom: 2em !important;
    }

The result was:
The space between the headings are the same.
The heading “Kategorier” is still gone.
Headings overlap paragraph blocks.

I had to change the headings padding.

     .page-id-536 .wp-block-heading {
         margin-bottom: -0.99em !important;
    }

I cant choose any lower value than -0.1em without having the headings overlapping paragraph blocks. I tried changing -0.99em to -0.1em.

     .page-id-536 .wp-block-heading {
         margin-bottom: -0.1em !important;
    }

The result was:
The heading “Kategorier” is now visible.
The heading are very close to the paragraphs blocks. Is that inevitable?

I still need to reduce the yellowmarked areas (on my image), between image and heading. Is there a way to do that?

Hi @boppar

Could you please try adding this CSS code to your site and check if it works as expected?

.has-text-align-center {
  text-align: center;
  margin-top: -14px;
}


@media only screen and (max-width: 480px) {
.page-id-536 .hentry .entry-content figure.wp-block-image {
	margin: 0px 0px 0px 0px;
}
.page-id-536 .hentry .entry-content .wp-block-columns .wp-block-column {
	margin-bottom: -2em;
}

.page-id-536 .wp-block-columns .wp-container-6 {
	margin-bottom: 2.05em;
}
}

Here’s how your website looks on my end after I added those codes via inspect elements: https://cln.sh/gFGbFmLQ

I hope this helps! Do let us know how it work or if you have any other questions. Thanks!

Hi @shameemreza

Thanks. It looks on your video. When I try the code it looks bad. Like this:

https://streamable.com/algq2p

Hello @boppar,

The video doesn’t work for some reason, could you perhaps re-upload it or attach some screenshots?

Also, have you considered checking the column block settings? Perhaps you added a gap or margin from the block settings by mistake:

Link to image: https://d.pr/i/a8SMUz

Look forward to hearing back from you.

Hello @babylon1999

The video will work now: https://streamable.com/bnk9f1

I’ve checked the colum block settings. In my Storefront theme there are no settings for margins or block spacing.

I’ve checked the colum block settings. In my Storefront theme there are no settings for margins or block spacing.

I understand how frustrating my reply is as we’ve been going back and forth without any progress, but I still can’t see what you’re referring to from my end.

Please check this screencast: https://d.pr/v/97lLWI

I’m not sure if you figured it out or if I misunderstood your request, either way, please let us know. :?)