Changing text size for mobile

[Mark Roberts]

Hi there,

Is it possible to have a different font size for mobile.
Our H1 title sizes are fine on tablets, laptops and desktops, but these are very large on small Mobile screens.

Thanks,
Mark Roberts

[Zex]

Hello, Mark!

Yes, it is possible.
Actually, You did not write what title you would like to change (Site title or slider title) so I’ll write you a solution for both.

Insert the code below in Customise->General->Additional CSS

For the Site title:

@media screen and (max-width: 600px){
#masthead .site-title a {
    font-size: 12px!important;}
}

For the Slide title:

@media screen and (max-width: 600px){
#agama_slider  h2.slide-title {
 font-size:12px!important;
}
}

Change the font-size value per your needs.

https://prnt.sc/jjwqf6

Can you give me your website address?

Regards

[Mark Roberts]

Thanks Zex,

I’ll implement the css on the site title.

[Mark Roberts]

Hi again Zex,

I have problems implementing the change.
i only want to make the h1, h2, h3 etc. smaller for mobile screens.
Problem is if I add this to your css it doesn’t look right.
This is what I tried

@media screen and (max-width: 600px){
h1, h2, h3 {
    font-size: 12px!important;}
}

But then it start playing around with the titles on the sliders as well.

If I try just adding h1, h2 and h3 to the css as is it doesn’t have effect on the text in mobile.

@media screen and (max-width: 600px){
#masthead .site-title a, h1, h2, h3 {
    font-size: 12px!important;}
}

I would just like to change the h1, h2 and h3 sizes in the text on the pages.

link to website: blueberryhill.be

Thanks again,
Mark

[Zex]

Hello Mark!

Try to add next code:

@media screen and (max-width: 600px){
.site-content h1, h2, h3 {
    font-size: 12px!important;}
}

Regards

[Mark Roberts]

Thanks Zex,

works perfectly 🙂

[Zex]

Hi,

I’m glad to we solved it 🙂

Best Regards

[Author]

Posts