Docs

[Steve C]

Evening!

I’d like to reduce the margins between columns throughout the site (link in PM underneath).

I’ve trawled through the forums but all the answers seem to be a specific to individual sites. Would you ,mind having a look for me?

Many thanks,

S

[Steve C]

This reply has been marked as private.

[Joao]

Hi There,

On Cornerstone, click on the magnifying lens of the ROW where your Columns are placed and turn on Marginless solumns.

Once you have done please adjust the margin on each column using the Cornerstone paramaters, click column per column and adjust.

Hope that helps

Joao

[Steve C]

Hi Joao,

The margin parameters don’t appear in columns, only padding, which means the columns are still butted next to each other.

I don’t mind reducing the gap between columns throughout the site if necessary?

Many thanks,

Steve

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

@media (min-width:979px){
.x-column {
    float: left;
    margin-right: 2%;
}
}

Hope that helps.

[Steve C]

Hi Christopher,

Nearly, but the 3 column in the middle is out of kilter now?

It also seems that the items have shifted away from the right border?

Many thanks,

Steve

[Rad]

Hi Steve,

Hmm, this will be quite long as all columns are affected. I’ll explain it in details so you could create your own set of CSS for different column counts. Let’s start with 3 columns.

Given :

1 row = 100%
3 columns class = .x-1-3
gap size = 2%

Solution :

1. Get the remaining row width without the gap
( 1st column and 2nd column gap + 2nd column gap and 3rd column gap | 2% + 2 % = 4% )

100% – 4% = 96%

2. Get the width of each column

96% / 3 = 32%

3. Now let’s create the CSS based on that values (I also added comments to explain another styling)

@media ( min-width: 768px ) {

/* the main CSS for changing columns spacing and gap */

.x-container:not(.marginless-columns) .x-column.x-1-3 {
margin-right: 2%;
width: 32%;
}

/* make sure they are on the same line */

.x-container:not(.marginless-columns) .x-column {
float: left;
}

/* Since there is no 4th column, let's remove the gap after the last column (which is 3rd colum) */

.x-container:not(.marginless-columns) .x-column:last-child {
margin-right: 0px !important;
}

}

I added .x-container:not(.marginless-columns) so it won’t affect other existing columns.

That’s it 🙂 , and you can create more CSS targeting other columns like 4 columns, 5 columns and more.

Cheers!

[Steve C]

Hi Rad,

Thank you. That worked a treat on the 1/3 + 1/3 + 1/3 columns.

But sadly it messed up the 2/3 + 1/3 column, placing the 1/3 column directly underneath the 2/3.

I’ve had to revert back to the original page as it’s with the client for comment at the moment. If you can think of a resolution without reference I would be very impressed!!!

Thanks again!

S

[Friech]

Hi There,

Like Rad’s example above, we need to keep the sum of the columns on ROW and its margins to 100%.
What happen here is because the sum of 2/3 and 1/3 columns plus the 2/3 margin (4%) exceeds to that 100% bound, the 1/3 drops below. You can not also make this sum less than 100% because if you do, the last column will look like leaning to the left. This needs to be 100% all the time.

By default 2/3 columns is 65.33332%; and with Rad’s code above the 1/3 column became 32%; plus the 4% margin (default of all column), that results to 101.3332%.

Keep in mind that this 4% margin (default of all column) is the space between columns that you want to reduce.

Lets adjust the width of the 2/3 columns with its margin, so it will play along with the new 1/3 width (32%).

Please update the CSS code given above to this:

@media ( min-width: 768px ) {

/* the main CSS for changing 1/3 columns spacing and gap */

.x-container:not(.marginless-columns) .x-column.x-1-3 {
margin-right: 2%;
width: 32%;
}

/*For 2/3 columns*/
.x-container:not(.marginless-columns) .x-column.x-2-3 {
	width: 66%;
	margin-right: 2%;
}

/* make sure they are on the same line */

.x-container:not(.marginless-columns) .x-column {
float: left;
}

/* Since there is no 4th column, let's remove the gap after the last column (which is 3rd colum) */

.x-container:not(.marginless-columns) .x-column:last-child {
margin-right: 0px !important;
}

}

Since this is a site wide, you also need to adjust the width of the other columns (1/2, 1/4, 1/5, etc.) if you’re planning them to pair/combine with the new 2/3 and 1/3.

Hope this helps, Cheers!

[Author]

Posts