CSS for responsive font size in Shapely

Shapely
1

I am trying to change the font sizes on my site https://pbp.icefeatherwind.com.au so that they are responsive to different sized devices. Below is what I have put into the Custom CSS (which works on my other site).

Have I done something wrong?

CSS USED:

@media (max-width: 1000px) {
h1, .title-h1 {
line-height: 45px !important;
font-size: 45px !important;
}
h2, .title-h2 {
line-height: 40px !important;
font-size: 40px !important;
}
}
@media (max-width: 768px) {
h1, .title-h1 {
line-height: 40px !important;
font-size: 40px !important;
}
h2, .title-h2 {
line-height: 35px !important;
font-size: 35px !important;
}
}
@media (max-width: 500px) {
h1, .title-h1 {
line-height: 35px !important;
font-size: 35px !important;
}
h2, .title-h2 {
line-height: 30px !important;
font-size: 30px !important;
}
}

2

Hi there

If css works on your website and you are satisfied with results then everything is ok :slight_smile:

3

Sorry, I didn’t make that clear - the CSS I have used is not working. It doesn’t change the font size for smaller devices, they remain large and overflow off the screen.

Can you see if I have made a mistake in my CSS< or is there somewhere else in the theme that I can force the fonts to shrink when on smaller devices?

4

Hi there,
Thanks for keeping in touch.
In this case, could you try out the following CSS code:

@media only screen and (max-width: 767px){
h3 {
font-size: 24px !important;
}
}
@media only screen and (max-width: 767px){
h5 {
font-size: 16px !important;
}
}
@media only screen and (max-width: 767px){
h6 {
font-size: 12px !important;
}
}
@media only screen and (max-width: 500px){
h2, .title-h2 {
font-size: 18px !important;
}
}

I hope this helps.
Best Regards,
Support.