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 http://www.DeepL.com/Translator (free version)
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 http://www.DeepL.com/Translator (free version)
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.
Please post a link to an example article.
Just because you're not paranoid doesn't mean everybody isn't out to get you.
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.
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.
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:
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:
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;
}
Just because you're not paranoid doesn't mean everybody isn't out to get you.
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
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
Using the css suggestions as above, but with the following change:
or
.wf-columns p {
display: flex;
align-content: center;
justify-content: center;
}
or
.columns-text-center{}
.columns-text-center p {
display: flex;
align-content: center;
justify-content: center;
}
Just because you're not paranoid doesn't mean everybody isn't out to get you.
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 http://www.DeepL.com/Translator (free version)
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 http://www.DeepL.com/Translator (free version)
Please put this css code in your template stylesheet:
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:
.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;
}
}
Just because you're not paranoid doesn't mean everybody isn't out to get you.
- Page :
- 1
There are no replies made for this post yet.
Be one of the first to reply to this post!
Be one of the first to reply to this post!