I’m trying to make a cornerstone headline element wrap. On desktop my large headlines look fine but on mobile, they are running of the page. Are there any suggested clean methods for doing this?
Hey @santosfel5,
The headline elements should automatically wrap to the next line when the space of its container is not enough to display them.
It might be some setting that is assigned to the element or other factors. For us to be able to check and confirm this, please provide us the link to the page where the headlines are because I am not sure which site is in question since you have several licenses in your account.
Thank you.
Here is the site: https://octocogstage.wpengine.com/
Take a look at the “Digital Landscapers” headline on mobile. It doesn’t appearing to be wrapping.
Hi @santosfel5,
Actually even on my laptop screen, the word “Landscapers” is getting overflown.
The problem here is not wrapping because as you can see the “Digital Landscapers” is getting wrapped, it just the word “Landscapers” is lengthy, there is no other way around it but you need to reduce your font size. This issue is also happening to your other headlines on mobile. You need to adjust this on the Root Font Size level.
You can utilize the Root Font Size feature under X > Theme Options > Typography to adjust your text/title size in specific breakpoints.
Each of those value XS (extra small), SM (small), MD (medium), LG (large), and XL (extra large) represents a screen width, so you would want to set a smaller value on XS and SM, and higher (not too much) value on MD, LG, and XL.
Now, all the common text/headline of the site will be base of those values, and Then on your elements, you can use the rem unit, rem Units Along with Differing Root Font Sizes you can set different root font sizes for each breakpoint of the theme, which allows all text across your website to be responsive. Remember, you are setting the base sizes for your theme overall, so this will affect everything, but starting with larger numbers on desktop and going to smaller values on smaller screens will help the overall responsiveness of typography on your website. Then, you can utilize rem units in the builders to scale text up and down based on the root font-size.
X / Pro Stepped Font Size Demo
Hope it helps,
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.