Align columns in the center

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 Online

Official support hours

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

#113638 Align columns in the center

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 Ryan on Monday, 15 May 2023 10:15 BST

Thursday, 27 April 2023 12:42 BST

[email protected]

Hello all,
I'm new here on the forum and have only been working with the Pro version of JCE for a few days.
The real reason for switching to the Pro version are the columns.
Now I have created a row with three columns in an article.
So far no problem.
But now when I look through the different views (desktop, tablet, mobile), the columns are always left-aligned.
But I would like to have the columns in the middle.
Please do not confuse this with the text alignment.
I hope I have expressed myself reasonably understandable and someone of you can help with.
I didn't find anything in the forum - could also be due to my lack of English knowledge (unfortunately there is no German forum, is there?).
In any case, thanks for reading and 1000 thanks for a practical solution.

Joomla 4 (latest version)
JCE Pro (latest version)
Bootstrap 4
PHP8

Stephan

P.S. Answers also gladly in german 😉

Translated with www.DeepL.com/Translator (free version)

Thursday, 27 April 2023 14:54 BST

Ryan

Columns are designed to occupy the fill width of the page, so should not be left or right aligned. Only the content of the columns will be aligned.

Please post a link to an example article.

Ryan Demmer

Lead Developer / CEO / CTO

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

Thursday, 27 April 2023 15:35 BST

[email protected]

Hello Rayen,
thank you very much for the quick reply.
Here is the link to the page:
https://manthey-sylt.de/joomla4.x/unsere-appartements/appartement-46?i=20150619-113542

The upper ones are displayed as I would like them to be. But with those the text is center aligned and I just don't want that with the lower ones.
It's about the columns further down (season times and prices 2023)!
The view on PC and tablet is ok. Only on a cell phone not.
I have also already tried another template.
Also there everything is displayed left-justified on a cell phone.
Thanks again for taking the time to do this.

Friday, 28 April 2023 10:50 BST

Ryan

As the columns occupy the full width of the content, that cannot be center-aligned, so you can only align the content in the columns. You can do this in 2 ways: 1. Center align the content in all columns on the site by adding the following to your template stylesheet:


.wf-columns p {
    text-align: center;
}

1. Center align the content in specific columns by using a spcific css class, applied to the columns in the Column dialog. To do this, add the following to your template stylesheet, then select the columns-text-center class name from the Classes list in the Columns dialog:


.columns-text-center{}

.columns-text-center p {
    text-align: center;
}

Ryan Demmer

Lead Developer / CEO / CTO

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

Friday, 28 April 2023 14:55 BST

[email protected]

Hello Ryan,
thank you for your answer.
I must have expressed myself incorrectly.
I would like to have this one column displayed in the center.
In the responvive view on an iohone, only one column is displayed. That is ok. But this column is then on the right side of the screen (see image column right.jpg).
But I would like to have the column in the middle of the screen (see image column center).
I don't want to align the text (!) in the center of the column (see photo text center.jpg) - that would be no problem, you can do that with the text alignment in the editor (block-center-left-aligned-right).
Maybe you have a solution for this?
Sorry that I express myself so unclearly.
By the way, picture column-center.jpg is a photomontage :-)

Thank you

Attachments

Saturday, 29 April 2023 16:22 BST

Ryan

Using the css suggestions as above, but with the following change:


.wf-columns p {
    display: flex;
    align-content: center;
    justify-content: center;
}


.columns-text-center{}

.columns-text-center p {
    display: flex;
    align-content: center;
    justify-content: center;
}

Ryan Demmer

Lead Developer / CEO / CTO

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

Saturday, 13 May 2023 16:29 BST

[email protected]

Hello Ryan,
thank you for your answer.
I was away for a few days and am only now trying out your suggestions.
Unfortunately they do not work.
If I put the code in the css, and check everything on the iPhone, the columns are displayed in the middle of the screen, but so is the text (see photo attached). Then I could center align the text right as I type.
If I manually left-align the text again, the columns are also left-aligned again.
I want to have the columns centered on the screen, but the text in the columns left or right aligned.
Or am I making a mistake here?
Do you have another idea?
Thank you in any case for your help

Stephan

Translated with www.DeepL.com/Translator (free version)

Attachments

Monday, 15 May 2023 10:15 BST

Ryan

Please put this css code in your template stylesheet:


.wf-columns p {
    display: flex;
    justify-content: center;
}

Then remove the text-align:center styles that you have applied. If you only want the code to affect small devices, then use this css code instead:


@media (max-width: 480px) {
    .wf-columns p {
      display: flex;
      justify-content: center;
      text-align: initial;
    }
}

Ryan Demmer

Lead Developer / CEO / CTO

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