Skip Navigation

[Resuelto] Margin/Padding in Blocks

Este hilo está resuelto. Aquí tiene una descripción del problema y la solución.

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 hace 3 años, 11 meses. 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

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)

Etiquetado: ,

This topic contains 4 respuestas, has 2 mensajes.

Last updated by GinaM9227 hace 3 años, 11 meses.

Assisted by: Jamal.

Autor
Mensajes
#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

Jamal
Supporter

Languages: Inglés (English ) Francés (Français )

Timezone: Africa/Casablanca (GMT+01:00)

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

Jamal
Supporter

Languages: Inglés (English ) Francés (Français )

Timezone: Africa/Casablanca (GMT+01:00)

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!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.