- This topic has 3 replies, 2 voices, and was last updated 5 years, 7 months ago by
.
Hi there
I’m really struggling with responsive text on my site. I have tried using yellow pencil, but the global tool doesn’t appear to make the changes over everything so I’m having to make changed to every single page which is taking AGES! I’ve seen I can add custom css, but i’m not a coder and struggling to make tit work. Can you help at all?
It’s just H1, H2 and paragraph I need to be responsive as i haven’t used any others on the site.
For Desktop font sizes
(screen size 1200px wide and above)
h1 – 54px
h2 – 33px
paragraph – 25pxFor tablets i’d like:
(screen size 991px wide and below)
h1 – 45px
h2 – 28px
paragraph – 22pxFor mobile i’d like:
(screen size 360px wide and above)
h1 – 30px
h2 – 25px
paragraph – 18pxObviously line heights will be affected too. Can you help at all?
Many thanks indeed.
Solution for this topic
Hi @jodie_cole84,
I hope you are well today and thank you for your question.
You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
@media only screen and (max-width: 1200px) { #page-container h1 { font-size: 54px; } #page-container h2{ font-size: 33px; } #page-container p{ font-size: 25px; } } @media only screen and (max-width: 991px) { #page-container h1 { font-size: 45px; } #page-container h2{ font-size: 28px; } #page-container p{ font-size: 22px; } } @media only screen and (max-width: 360px) { #page-container h1 { font-size: 30px; } #page-container h2{ font-size: 25px; } #page-container p{ font-size: 18px; } }Best regards,
Shufflehound teamAmazing! Thank you so much for your help 🙂
You are most welcome here 🙂
