How to increase spacing between columns

You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours

Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#103189 How to increase spacing between columns

Posted in ‘Editor’

This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by globinli on Tuesday, 13 July 2021 09:57 BST

Thursday, 20 February 2020 22:31 GMT

s9ny

I love the new column feature. It's a gamechanger! I've begun using it on client sites. Almost, without exception, I'm requested to add more space between the columns so that the right side of the text isn't so close to the left side of the text in the next column. Is this possible to adjust?

Thanks.

- Pete

Friday, 21 February 2020 11:47 GMT

Ryan

I love the new column feature. It's a gamechanger! I've begun using it on client sites.

Thank you, and this is just the start. I hope to add improvements and new features in Columns in the future, which brings me to...

Almost, without exception, I'm requested to add more space between the columns so that the right side of the text isn't so close to the left side of the text in the next column. Is this possible to adjust?

I am working on an additional option to set in the Columns dialog to select a spacing value, eg: Small, Medium, Large, but until then, you can use css in you template stylesheet to add custom spacing, eg:


[data-wf-columns] > div,
.wf-columns .wf-column {
    margin: 0 1em;
}

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Wednesday, 01 April 2020 02:00 BST

blitz2

Ryan do you still intend to add the above mentioned feature to increase the gap between columns i.e., increase the gutter etc. and if yes can you please advise an estimated release date? It would be very handy for those of us who are not members of the coding fraternity. Cheers.... Rod

Wednesday, 01 April 2020 10:11 BST

Ryan

Yes, I plan to add this in JCE Pro 2.8.11, hopefully by the end of April.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Wednesday, 01 April 2020 13:01 BST

blitz2

Thank you for then update Ryan. Stay safe. Rod

Tuesday, 28 April 2020 05:01 BST

blitz2

Afternoon Ryan. Please advise if this addition is still on track?
Cheers.... Rod

Tuesday, 28 April 2020 14:56 BST

Ryan

Not for 2.8.11 unfortunately as I hit a snag with the Bootstrap framework, which requires me to recode that part. But almost definitely 2.8.12 😉

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Wednesday, 13 May 2020 02:33 BST

blitz2

Ryan did this update occur with 2.8.12 and if yes is it a setting in the parameters location?
Cheers.... Rod

Wednesday, 13 May 2020 10:15 BST

Ryan

Not yet, still working on this...

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Wednesday, 17 June 2020 07:50 BST

blitz2

G'day ryan. Hate to be a pest but is this item expected in the near future or should one be looking at an alternative solution to address the column spacing issue?
Cheers.... Rod

Monday, 22 June 2020 03:56 BST

blitz2

Ryan please disregard this item/question. I have a solution. Cheers

Thursday, 09 July 2020 22:15 BST

s9ny

The solution to add the CSS code worked great. Without the css, the columns come within a single space of one another. With the CSS, however, when the columns wrap under each other for narrower screens, the 2nd column indents from the first column. Suggestions?

Attachments

Edited by s9ny on 2020-07-09 22:17 BST

Friday, 10 July 2020 10:27 BST

Ryan

Change the margin so it is only applied to the right of each box, eg:


[data-wf-columns] > div,
.wf-columns .wf-column {
    margin: 0 1em 0 0;
}

In a few weeks, when Chrome 84 is released, you can use the gap property instead (currently only supported in Firefox), eg:


[data-wf-columns,
.wf-columns {
    gap: 1rem 0;
}

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 20 July 2020 20:39 BST

Denis L.

Hi, With the provided code, the bad alignment of the column is still happening but I managed to fix it until JCE devs implement the column gap option in the core component. Here is the CSS code to add into your template CSS :


@media (max-width: 960px){
.wf-columns-stack-medium>.wf-column {
    width: 100%;
    margin-left: inherit !important;
    margin-right: inherit !important;
    flex: auto !important;
}
}

.wf-columns .wf-column {
    max-width: 100%;
    margin-left: 15px;
    box-sizing: border-box;
    flex: 1;
}

Hope it helps! 🙂

Tuesday, 21 July 2020 11:55 BST

Ryan

Please try JCE Pro 2.8.15 RC3 - https://www.joomlacontenteditor.net/downloads/editor/pro/development

This now uses the css gap property for spacing between columns, with overrides for IE10/11 and Safari.

The gap property is now supported in the latest version of Firefox and Chrome, Edge and Brave (Chromium 84+)

I intend to release this version on Thursday at the latest, so would appreciate feedback on the change.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Wednesday, 22 July 2020 13:25 BST

Denis L.

Hi Ryan,

Does that mean the there is now an option somewhere in JCE settings to change the space between columns? If yes, can you tell us where it is? I can't find such an option anywhere. Or do we still have to do a CSS over right in our templates?

Wednesday, 22 July 2020 13:27 BST

Ryan

Not yet, but recent widespread support for the gap property makes this easier to implement. I will attempt to add an option in JCE Pro 2.8.16

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Wednesday, 22 July 2020 13:29 BST

Ryan

The following styles will be used to set the gap size in the next update. These are available to use now in 2.8.15:


.wf-columns-gap-small {
    gap: 0.25rem;
}

.wf-columns-gap-medium {
    gap: 0.5rem;
}

.wf-columns-gap-large {
    gap: 1rem;
}

.wf-columns-gap-none {
    gap: 0;
}

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Wednesday, 22 July 2020 13:32 BST

Denis L.

OK thanks!

Saturday, 10 July 2021 09:52 BST

globinli

I love the new column feature, too. Before I spent hours with divs! Many, many thanks for that!

I have a layout like:

Picture / Text
Text / Picture
Picture / Text
Text / Picture

On widht screens this is perfect. But by smaler screens it staple vertical (thats good) but I get:

Picture
Text
Text
Picture
Picture
Text.

Any chance to tell a div to staple from left to right oder right to left? At the end I would like to have:

Picture
Text
Picture
Text
.....
On small screens.

Monday, 12 July 2021 09:22 BST

Ryan

@globinli - Assuming you are using the "Generic" CSS Framework for Columns, add the following to your template stylesheet:


@media (max-width: 640px) {
	.wf-columns + .wf-columns:nth-of-type(2n) > .wf-column:first-child {
		order: 99;
	}
}

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 12 July 2021 14:57 BST

globinli

Many thanks! I will try it so.

In your Jce I can choose the layout 2-1, 1-2, 3-1 and so on. But what, if I need a very speciel layout? Something like 1-5 or 45%-55% or 200px - 850px?

Monday, 12 July 2021 16:11 BST

Ryan

But what, if I need a very speciel layout? Something like 1-5 or 45%-55% or 200px - 850px?

At this stage you would have to create the css for that yourself.

In order to make Columns workable, they had to be kept simple, therefore limiting the number of options available and reducing the ability to customize.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Tuesday, 13 July 2021 09:57 BST

globinli

Many thanks. Yes, for me anyway as simple as possible :-D Thanks for anwsering my questinos 😃