Headline Centering

[Regnalf]

I’ve tried some solution with centering Headline Text.

Centered Headline (icon not centering)

I am using multiple headlines to create a little contact section in the footer with my address, phone number, etc. When I try to add an icon, for the phone number for example, I can’t get it to center with the the headline. I tried adding the css to the element that has been suggested in other similar topics, but when I do that, it shifts the other headlines over to the left. This is the css I added to the phone number headline .x-text-content-text { -webkit-flex-grow: inherit; flex-grow: i…

Centered Headline (Icon Doesn't Center)

Team please help When I center a Headline Element that has an icon, the icon stays to the far left Should go to center, positioned to the left of the heading text [image]

But the headline text still doesn’t shrink as it should!

[prakash_s]

Hello @Regnalf,

Thanks for writing to us.

In order to align the Headline text in the center I would suggest you please set the containing column’s Flexbox “Horizontal” as “Center”.

If it doesn’t work for you, we need to check your settings, I would request you, please share your details in a secure note. Please provide the following details meanwhile you must troubleshoot a few common issues before we investigate your settings.

• WordPress Login URL
• Admin-level username and password
• Exact page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[Regnalf]

Well that’s excactyl what i did, and it did center the element when in desktop size.
But you still can see that it’s not centering correctly on small screen, (this extra space on the right side).

I’ve tried with the flex settings and with fit-content, but nothing worked.

I’ve added the credentials in sn.

[christian]

Hey @Regnalf,

Your headline is actually still centered, even on mobile devices. You just don’t see it because the headline spans the width of the small screen and the text in the headline is left aligned so it looked like the headline is positioned on the left.

The solution that I see is you set the Headline Width to 200px so it will be centered like on desktop.

If that is not what you’re expecting, please tell us what you want to accomplish on mobile like you can reduce the font size on the smallest screensize to make the headline take 2 lines only. It’ll sacrifice the readablity though.

Thanks.

[Regnalf]

Yes, that the element is basically centered is already clear.

My question is whether this unnecessary space that arises when wrapping a text line can be avoided. The h1 element fills the area, although it actually needs less space.

This is how it should look like in the final:

I didn’t find a way yet to tell the element it should fit the text width. “fit-content” property didn’t work.

[ruenel]

Hey @Regnalf,

In your Headline element settings, set the width to auto and the maximum width to 100%.

Hope this helps.

[Regnalf]

No, that doesn’t change anything with the width of the text!

[christian]

Hey @Regnalf,

I wonder if you have tested what I suggested previously because it looks close what you’re looking for.

@christian

The solution that I see is you set the Headline Width to 200px so it will be centered like on desktop.

If that is not what you’re expecting, please tell us what you want to accomplish on mobile like you can reduce the font size on the smallest screensize to make the headline take 2 lines only. It’ll sacrifice the readablity though.

Kindly test it out and let us know what is wrong with the suggestion. And remember that you can set different values per screen size as shown in my screenshots. It also does not have to be 200px. The idea there is you set a fixed Width or even Max Width.

Thanks.

[Regnalf]

Yes, i tried your suggestion. But it is not what i want to achieve.

I want the header to extend as far as possible on desktop level, without wrapping and without fixed width.

On smaller screens, the text may wrap, but the entire element should remain centered.

The issue is still that remainig space in the text element:

[christian]

Hey @Regnalf,

What I suggested is exactly what you need as you can see in my screenshots.

@Regnalf

I want the header to extend as far as possible on desktop level, without wrapping and without fixed width.

In my previous screenshot, you will only apply a fixed with IN mobile screens.

@christian

@Regnalf

On smaller screens, the text may wrap, but the entire element should remain centered.

Again, in my suggestion, you only apply a fixed Width or even Max Width on mobile screens. What you want to accomplish is what’s shown in my screenshot.

@christian

Restricting the Headline’s Width or Max Width in combination with reducin the Font Size (on mobile) is the only solution on mobile screen sizes.

---

And lastly, as I’ve said, please kindly set it up and show us the problem with it.

Thanks.

[Regnalf]

I have 2 problems with it unfortunately. One is that this solution is bound to only one headline element, and I have to set it for each headline separately.

The second, unsolvable problem, is that it is planned to make the website multilingual. So the solution with a fixed width is not applicable.

I understand by now that it is not a theme.co theme problem, but a general one how elements are rendered.
Also i found something with JavaScript solution, but I’m not sure if it works yet.

How to make the width fit to the content when text wrapped?

If you know another solution besides the one with JavaScript that only works with settings via Cornerstone I would be very happy about it.

In the worst case I would have to try it with another element than Headline.

thanks, Regnalf

[christian]

Thanks for sharing those 2 additional factors, Regnalf. In that case, there would be some calculation involved or other techniques, whether using custom CSS or JS. Regretfully, that is beyond the scope of our theme support to cover. We can provide guidance on this in One.