Let’s say I have a headline that is 80px on Desktop but on Mobile it needs to be 32px.
What is the best way to implement this in Pro?
You have three options for responsive font size:
1- You can use the Responsive text tricks and set the font size in a way that it will be responsive. You can learn about that here .
2- You can hide the element that you used in Cornerstone/Content builder for mobile and add another element and set the font smaller. Please kindly click here for more information on how to hide elements in various viewports.
3- You need to use custom CSS code to force the smaller font size. (This is customization and outside of our support scope.)
Hope this helps,
I read this… https://demo.theme.co/integrity-1/shortcodes/responsive-text/
Implemented on this… https://awxcode.com/company/how-we-forecast/
On the following text and it is not working… We’ve pioneered the process of digitally processing weather data for 30+ years.
it blew up the font and does not scale.
If I use the page example it breaks the page
[custom_headline class=“h-responsive” type=“center” level=“h2”]
We’ve pioneered the process of digitally processing weather data for 30+ years.
[/custom_headline]
[responsive_text selector=".h-responsive" compression=“1” min_size=“24px” max_size=“40px”]
Here was the origional sample used…
–
We’ve pioneered the process of digitally processing weather data for 30+ years.
[responsive_text selector=".h-responsive"]
Page is fully broken in editor but not dev site.
Hello @verobeachmarketing,
Please change your class selector from .h-responsive to .h-responsive .x-text-content-text-primary. Please be advised that the responsive text will compute the appropriate font size between the maximum and minimum font size you have set against the width of the element.
The easiest way to have a headline that is 80px on Desktop and 32px in smaller screens, you can insert an inline element CSS in the “Customize” tab in the headline element settings like this:
$el.x-text-headline {
font-size: 80px;
}
@media(max-width: 767px){
$el.x-text-headline {
font-size: 32px;
}
}
To learn more about element CSS, please check out this documentation:
To learn more about the @media CSS property, please check this out:
Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:
- Intro to CSS - https://goo.gl/mFuWQT
- How to get CSS selectors - https://goo.gl/BmoH39
- Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
- CSS Media Queries - https://goo.gl/L3ZHNg
Both of these work, thank you.
Two issues still remain…
#1 - Using this shortcode causes the admin pro editor to break. How can I resolve this? It broken when putting in short codes. It stated a malformed HTML which was while I was typing to change it etc. Everything is fixed and normal. But the page never returned.
#2 - I tested moving the shortcode to a text only section at the bottom to see if it would work on multiple headlines in the page and it does. I set the .h-responsive class on each of the four similar headlines but only two became responsive. Can you explain this?
One question that I have is this a reasonable practice to set all font, classes with shortcodes and have a short code list at the bottom of each page where each page uses similar shortcodes/classes, so we have a template?
With as many fonts as we have, it seems cumbersome to use inline CSS methods through out each page as we have about 45 pages and up to 25 different responsive fonts on each page. Example of this is on the same How We Forecast page on the 200+ text only.
Hello @verobeachmarketing,
1.) When using legacy shortcode, plese do not add some line breaks or new lines. You must use one line shortcode like this:
[custom_headline class="h-responsive" type="center" level="h2"]We’ve pioneered the process of digitally processing weather data for 30+ years.[/custom_headline][responsive_text selector=".h-responsive" compression="1" min_size="24px" max_size="40px"]
2.) I have inspected the page and only two of the headlines contains the .h-responsive class.
When there are several headlines and text on the site, adding inline or custom CSS will become complicated. If you use pixels as your font units in each of your elements, most likely, it will be the same pixel font size across all screens. This is why we highly recommend that your use the Responsive Typography in X/Pro > Theme Options > Typography. There will be a root font size which is the base font, usually in pixels, and then in each of your elements like headlines and text elements, you use em so that as the base font of the respective screen changes, the font size of the element will also change.
Please check out the Typography option here:
And to fully understand how the responsive Typography works, please check it out here:
Hope this makes sense.
Are you saying I cannot put the short codes at the bottom all together for the entire page which did appear to be working?
[responsive_text selector=".h-responsive" compression=“1” min_size=“24px” max_size=“40px”]
Also, is this portion necessary?
[custom_headline class=“h-responsive” type=“center” level=“h2”]
This seems like a duplication, the setting are managed in the page gear when I create the responsive text with max and min etc.
Please note the legacy shortcodes are old shortcodes, you’re not required to use them. And you don’t have to use it along with new responsive settings like in your screenshot,
If you’re already utilizing this
Then you don’t need this
[responsive_text selector=".h-responsive" compression=“1” min_size=“24px” max_size=“40px”]
As for the second question if it’s necessary, it depends on your preference if you use elements then you can use it instead of [custom_headline class=“h-responsive” type=“center” level=“h2”].
Now back to the shortcodes, you can place it anywhere but it’s best to place it at the end along with other similar shortcodes like this [responsive_text selector=".h-responsive" compression=“1” min_size=“24px” max_size=“40px”]
Plus, you only need to add that shortcode once per class, example if you have 3 headlines and have the same h-responsive then you only need one [responsive_text selector=".h-responsive" compression=“1” min_size=“24px” max_size=“40px”], and not another [responsive_text selector=".h-responsive"].
Multiple responsive text shortcode is only applicable if there are multiple classes
[responsive_text selector=".h-responsive-one" compression=“1” min_size=“24px” max_size=“40px”]
[responsive_text selector=".h-responsive-two" compression=“1” min_size=“24px” max_size=“40px”]
The h-responsive is not a requirement , it’s just a sample, the class is defined by you 
Now, if you’ll be using a headline element instead of legacy shortcode ([custom_headline]) , the selector would be .h-responsive .x-text-content-text-primary, or .this-my-class-one .x-text-content-text-primary where .x-text-content-text-primary is required.
I recommend using the already applied responsive setting instead of shortcode, and use headline element instead of headline shortcodes.
Thanks!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.