Docs

[Jacob D]

Is there a way to evenly adjust the spacing between columns in a single row? Case in point, I’ve got a five column row and tried doing it manually by adjusting the right margin to 10px in each column, but end up with the last column being (obviously) 10px off when my intention is to have them be evenly spaced from left to right.

[Friech]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Jacob D]

No problem, you can view the site here: http://cerulean.pmcgdev.com/ The ten position grid is the area I’m specifically working with, though as you can see from this one I’ve got the aforementioned attempt at fixing it in place. I’m not sure how or why, but adjusting the margins worked just fine on this page with a three column row: http://cerulean.pmcgdev.com/services/altitude-fitness-training-and-acclimation/

[Rue Nel]

Hello There,

When adjusting the spaces between columns, if you are using the standard columns, you have to change the margin as well as the width of the columns. Please keep in mind that the total width of the columns together with the spaces should always be 100% (the same as the total width of the row container). And if you are using a marginless columns in the row settings, you can have spaces between the columns by adding padding around the columns.

Hope this explains it briefly.

[Jacob D]

So I tried doing this a couple of different ways and it’s been kind of a cat on a leash. I change one thing which looks ok, but then changing another breaks something else. I’ve been modifying the margins by inputting values into the style field for the row and/or for each column, but have been adjusting padding in the provided options fields, but no matter what I do I end up with something being off.

Since I have to do this throughout the entire site and for numerous combinations of fields, is it possible to adjust the global CSS to have the spacing between columns everywhere be narrower?

[Jade]

Hi Jacob,

I have checked the pages of your site but I can’t seem to figure out any rows with columns that you are wanting to adjust. In the homepage, there is a row with 4 columns and the space between the columns is only 10px and doesn’t look like it could be adjusted more. Kindly provide us with some screenshots as well as it might be helpful.

Thank you.

[Jacob D]

It was close, but the outside edges still weren’t lining up and if I got them to line up, the column gap in between became off. I reset everything back to zeros to make it easier to see… if you look at the attached screenshot I simply want the gap between the columns (highlighted in pink) to be tighter, but for some reason I can’t just adjust the spacing of these gaps AND keep the edges of the row lined up. Does that make more sense?

[Jacob D]

FWIW, I got it as close as apparently possible by adding the required 10px right padding to each column and then added margin-right: 5px; margin-left: 5px to the row’s style. It’s still not full width, but closer than anything else has gotten it.

I’m not sure if there is a place to make feature requests, but having column gaps be easily chosen both globally in theme options and on a row by row basis would be a great addition!

[Christopher]

Hi there,

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

.x-column.x-1-4 {
    width: 24.6%;
    margin-right: .5%;
}

Hope that helps.

[Author]

Posts