Skip Navigation

[Resolved] Margin/Padding in Blocks

This thread is resolved. Here is a description of the problem and solution.

Problem:
The user wanted to remove some spacing between blocks.

Solution:
You can add a CSS class to the block or to a parent container block. And add a custom CSS to style them. Check this screenshot https://prnt.sc/sd9k5y

Then we can use CSS:

/* style the title*/
h4.no-margin-bottom{
    margin-bottom: 0px;
}
 
/* style the paragraph inside a shortcode block*/
.no-margin-bottom p {
    margin-bottom: 0px;
}

Relevant Documentation:
https://toolset.com/documentation/getting-started-with-toolset/using-wordpress-block-editor/#applying-custom-css-to-blocks

This support ticket is created 4 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 - - 9:00 – 13:00
14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 - - 14:00 – 18:00

Supporter timezone: Africa/Casablanca (GMT+01:00)

This topic contains 4 replies, has 2 voices.

Last updated by GinaM9227 4 years, 7 months ago.

Assisted by: Jamal.

Author
Posts
#1615909
reduce_pad.jpg

Tell us what you are trying to do? I am trying to reduce the space between fields in this View but am not able to with the margin/padding - see attached. Can you help?

Is there any documentation that you are following? Blocks

Is there a similar example that we can see? See website

What is the link to your site? hidden link

#1616737

Hello and thank you for contacting the Toolset support.

It seems that the <h4> of the title and the <p> of the time of working both have 20px margin-bottom

<h4> has a 20 px margin-bottom, check this screenshot hidden link
<p> has a 20 px margin-bottom, check this screenshot hidden link

I hope this helps. Let me know if you have any questions.

#1616797
margin_padding2.jpg
margin_padding.jpg

Below the title is not a 20px margin - it is a minus 20px margin because I was trying to reduce it but it doesn't work - see screenshot
The date field is a short code and there is no way to edit the margin/padding - see screenshot.

I cannot reduce it using Toolset Blocks.

#1617155

Yes, The blocks are having margin minus 20px, but the <h4> and the <p> are having positive margins.
To work around this, we will need to use classes in blocks and add a custom style. Check this screenshot hidden link I added a class "no-margin-bottom" on the heading block.
Because the shortcode block does not have a setting to add a custom class, I added the class to the parent container.
Then we can use a custom CSS to style each of them:

/* style the title*/
h4.no-margin-bottom{
    margin-bottom: 0px;
}

/* style the paragraph inside a shortcode block*/
.no-margin-bottom p {
    margin-bottom: 0px;
}

I did not add the custom CSS to the view or the content template. I'll let you add it.
Let me know if you still encounter any errors.

#1617473

My issue is resolved now. Thank you!