Column Spacing

Has anyone got any ideas on the post above please?

I have the same issue with column spacing. The problem in general using the layout padding is that when the screen gets narrow (e.g. portrait mode on mobile) and one row of 3 columns goes to 3 rows of 1 column, each row is not centered. Can someone please take a look at the set up we have for our page. One section has one row of 3 1/4 width columns (1/5 was too narrow) and another section with two 1/3 width columns (directly below). We just want to decrease the space between the columns for each section. Thanks!

Apologies. See below…

Hi Mike,
We’re able to have the columns centered. The issue is the spacing between the columns. Wed like to decrease the spacing between the columns. If you expand the window the columns separate creating a lot of space in between. If we add padding to the left of the far left column and padding to the right of the far right column it helps on desktops but when the screen goes portrait on mobile the padding pushes the columns off center. The left column (top row on mobile portrait) will be off center to the right. And the right most column will be pushed to far to the left of a mobile screen.

Is there a way to simply decrease the spacing between the columns on wide screens yet keep them centered on mobile screens when they stack into one column?
Thanks!

Sweet! Thanks Victoria. We’ll give it a shot. Looks like you’re using our custom class for column spacing. Thanks for including that!

Hi I have gone through numerous posts relating to reducing the spacing between columns.

However (whether down to my ignorance or something else) whatever I have tried has not seemed to work for me.

I have this site: https://skyro.cc/ruairi/ that I need to reduce the spacing between the columns on 2 rows.
Each column has an image and I want to make the aesthetics of the space between the 2 rows of images uniform and much smaller between the columns.
I have tried a variety of adjusting the “Edit Column >> Layout” and nothing I put in there seems to make a difference (using the Chrome browser on a mac).

It would be great if there was a general rule / process for reducing the spacing between columns, so that I can apply it when and where needed. I see mainly the solutions relate to CSS edits.

Can anyone help me understand how to reduce the columns spacing in this specific circumstance and help me understand how to apply this reduction of column spacing in general for future needs?

Thanks for your support.

• This reply was modified 4 years, 12 months ago by wagwag.

Hello
I too have tried these and they do not work for me. Perhaps you can help. I have listed the credentials below. On the home page, there are two column sections. Page down past ‘core features’ then a blue section and then color sections with two column rows are shown. The sections have CSS applied to centre the two columns in each, which are 1/3 and 1/2. I would like to increase the space between the columns (not padding as that is within the column), but ensure that cols are still centred on mobile and tablet when the two col rows show as one col rows.
Thanks very much.

I jumped into this forum since still open.
A fast question:
What to add a Quick CSS to control the space between column, indipendentely of their number?
something like:

/*----------------------------------------
// Column margin
//--------------------------------------
div .flex_column {
  margin-left: 20px!important;
  right-left: 20px!important;
}*/

??
thanks

What I meant is that no matter how many columns I have in the content, I would like a quick CSS to control their position. Basically, I want to reduce the white between the images. I attach my website link. But I don’t want a quick CSS for one page, but something I can use for all website.