Tagged: h2, mobile, responsive
Hi there
I’m using the Enfold Flat Business Demo template, and am having trouble getting the responsive design to work on Mobile phone screen sizes (testing on iPhone 5S).
I imported the sample site: http://kriesi.at/themedemo/?theme=enfold-overview
Then replaced it with my own text (see link in private content)
I have already tried this solution: https://kriesi.at/support/topic/h2-text-is-not-responsive/
The same issue occurs on both your sample site, and on my own site.
Issue 1: The H2 title (“Welcome”) and associated text underneath are not responding correctly and retaining padding when the width is reduced down to say *320px*. It looks like the problem occurs when the number of characters in first word of the H2 title is greater than 5. So “Howdy Guys!” works but “Welcome” does not.
Issue 2: In both cases the padding on the right side needs to be increased to the same as on the left as currently the text bumps right up against the browser window.
If you have a solution for this, I would be very grateful indeed, as it affects a number of pages on my site where H2 titles are longer than 5 characters.
Thanks for your help.
Hey corixus!
Thank you for using Enfold.
You can decrease the font size on smaller screens:
@media only screen and (max-width: 480px) {
.av-inherit-size .av-special-heading-tag {
font-size: .5em;
}}
Regards,
Ismael
Thanks, that solved the problem immediately.
What a fantastic service you have!
Hey!
You are welcome, glad Ismael could help! :)
For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)
Best regards,
Yigit