Reducing vertical margins between block grid images and text

Support
#1

Hi - please show me how to reduce the vertical white space between block grid items - specifically, between the image and text blocks.

I am currently using this code to control the margins of text and images (as well as using left and right padding in the section margins):

.x-block-grid>li {
margin: 0% 0% 0 0 !important;
}
.elcargo-text {
padding-left: 18px !important;
padding-right: 18px !important;
padding-bottom: 50px !important;
}

Thanks for your help!

#2

I am also having difficulty reducing the vertical space between sections Body Text 1 and Body Text 2. I’ve tried assigning class names to them and adding margin values in CSS, without any success.

Thanks.

#3

And … as a last kick at the same can, I have tried assigning 0 margins to the bottom of Body Text 3 by assigning the same class name reduce-1 to the section, column and row, and adding the code in the customizer, without success:

.reduce-1 {
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}

Here you can see that I am simply trying to wrap text around an image. Is there a better way to do that?

#4

Hi There,

Please try adding the following CSS instead:

li.x-block-grid-item .x-img {
    margin-bottom: 0;
}

Hope it helps :slight_smile:

#5

This is great! Now by adding

padding-bottom: 10px !important;

to the text objects in the block grid, I can control the spacing as I want it.

Will you also please show me how to reduce the margin between sections. My specific concern is the bottom margin of ‘Body Text 3’, but I would like to have this control over all the sections.

Thanks very much.

#6

I would like to pass on a suggestion to the development team, if I may. I am working on my 5th site with X theme / Cornerstone, and I find it frustrating that I end up every single time having to spend hours trying to get default margins to disappear. I spend a great deal of time looking on the forums and waiting for support for the same issue, again and again. It shouldn’t have to be this hard to control vertical margins.

My suggestion is to provide a very clear, obvious path to eliminating the default vertical margin values so that full control can be exercised by using the margins / padding dialogue in Cornerstone. I suggest that you document clear instructions in that dialogue area.

Thanks.

#7

Hi There,

Its the default bottom margin of a paragraph, if you don’t want a the paragraph to have a bottom margin. Wrap it in a <p> tag with a class mbn

e.g.

<p class="mbn">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

mbn means margin bottom no. You can find a list of that SPACING HELPERS CLASS on this post. It seems you already have an idea about this classes as you’re already using the class mtn to the custom headline. You do not even need to write your own classes since you already have this spacing classes, and your own classes might cause a conflict because you’re declaring it as !important which can make things complicated.

ROW and COLUMNS does not have a default margin and padding, SECTION does but you could actually reset that by just inspecting the section (https://prnt.sc/frrh3r).

Hope it helps,
Cheers!

#8

Hi -

Thanks to you, it looks like I am enjoying some success with this issue after all.

Wrapping text in the p tag and assigning classes - that seems to be the missing piece.

Thanks so much.

Drew

#9

Glad to hear that. :slight_smile:

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.