CornerStone Spacing between columns

This seems like it should be simple, but I can’t figure out how to do it and haven’t been able to find any thread that helps.

How do I decrease the spacing between columns in a Cornerstone row? For example, in a four column layout, I would like to reduce the white space between columns 1 & 2, 2 & 3 and 3 & 4. I don’t want to change amount of white space on the outside of columns 1 and 4.

Using the latest version of CornerStone and X-Theme.

Thanks for your assistance.

Cecil Bordages

Hi Cecil,

Thank you for writing in, it may seem simple but it’s really not, because you need to consider the width and the margins of the columns, it should be close to 100% but does not exceed to that. This is the same reason why there are no width and margin options on the columns.

You need to do this with a CLASS and adjust the width and margin accordingly. First, you need to add a class to your columns.


Then add this to Theme Options > CSS

.custom-columns.x-1-4 {
	width: 20%;
	margin-right: 6.66%;
}

Notice the values that are 20% x 4(columns) = 80% and 6.66% x 3(columns, the last column does not need the margin) = 19.98%

Simple if you add a margin, you subtract it to the width (and vice versa) so it does not exceed to 100%.

You also need to add this to your custom CSS, to make sure that the last column does not get a right margin.

.custom-columns.x-1-4:last-of-type {
	margin-right: 0;
}

Hope that shed some lights,
Cheers!

Thank you. I thought it would take some custom css. I wasn’t sure of what object to which it should be applied.

If you need anything else please let us know.

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