Gap between columns?

Support
#1

How can I put a gap between these columns. I have it set to margin-less columns because the gap on that is too large. So I need to put in a smaller custom gap where the yellow lines are.

#2

Hi There @waynepatt58

Thanks for writing in! If you need some space between content, you can set a padding for those columns.

Otherwise, you need to disable margin less columns and you can manually set your margin by adding a custom CSS rule. To do that, first you need to assign a unique CSS class to those columns.

Then you can add a CSS rule into your Cornerstone’s custom CSS area.

.my-column{
  margin-right:10px;
}

Hope that helps.

#3

thank you, worked perfectly

#4

You are most welcome!

#5

Just another quick question o the above CSS, I notice it applies the margin to all columns in the row, although I only applied the class to one column. What would cause that and does the CSS need to be modified to apply it to only one colum?

#6

Hello There,

The css code:

.my-column{
  margin-right:10px;
}

will only apply to the column that has this custom class. It should not affect other columns as well. Unless otherwise, you have changed the margins of the other columns in the column settings. If you did not, there could be something that is causing the issue. Could you please share to us the url of the page where you have this applied and encountered the issue?

Thank you in advance.

#7

The margin is good just want to center the columns in the row

log in details in secure note

#8

Hi @waynepatt58,

You shouldn’t really change the columns margin since they are columns, the default margin is 4%, so if there 4 columns there will be 3 gaps/spacing in between. Which means 4% x 3 = 12% margin in total, thus 100% - 12% = 88% left. And 88% / 4 columns = 22% width per column.

[1st column 22% width ] | 4% margin | [2nd column 22% width ] | 4% margin | [3rd column 22% width ] | 4% margin | [4th column 22% width ]

22% + 4% + 22% + 4% + 22% + 4% + 22% = 100%.

Now, you’ll apply a margin less than the total of 4%, expect spaces will appear on the right ( those are spaces not being utilized, and it’s not because it’s not centered). And if you’ll apply margin greater than the total of 4%, then expect the last column being pushed down.

Soo, if you’re going to change the margin, you should change the width as well. Example,

Given : 1% margin

Total margin = 3 gap x 1% = 3%
Remaining width = 100% - 3% = 97%
Column width = 97% / 4 = 24.25%

Try replacing the above CSS with this updated CSS.

@media ( min-width: 980px ) {
.my-column{
  margin-right:1% !important;
  width: 24.25% !important;
}
.my-column:last-child {
 margin-right:0 !important; 
}
}

And you must also add my-column to the fourth column’s class (not just for 1st, 2nd, and 3rd column’s class name).

Hope this helps.

#9

You guys are great, always there to help. You have the best tech support I have ever seen, many thanks.

#10

You are most welcome!
It’s good to know that it has worked for you.

#11

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