Reduce Size of Title Font on Mobile


#1

http://tannenlawgroup.com/ - The title looks fine on the larger mobile devices, but on smaller ones like a Samsung Galaxy, the title is running into the body. Any suggestions? Thank you.


#2

Hi,

You can make the site title smaller with this Custom CSS:

.site-title {
    font-size: 45px !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba


#3

Thanks, Csaba. Because I only wanted to reduce the size of the title on mobile devices, I added @media only screen.


#4

Hi,

Ok, so now with media query you have added it works well? or you still need more help with the media screen too? Please let me know, so if it’s needed I can help you with the media screen too.

Best Regards,
Csaba


#5

Hi guys,

I also have a question regarding pretty much the same subject.

How is that on the mobile version on the “Home” page the title is bigger than in all the other pages?

Thank you in advance for any help you may be able to provide me!

Alex


#6

Hi,

Please post a link to your website, so I can check.

Kind Regards,
Csaba


#7

Hi Csaba,

Sorry about that! This the website “neat-production.com”.


#8

Hi,

Can you, please point out which title is larger on your homepage then on other pages?

Kind Regards,
Csaba


#9

Hi Csaba,

When you’re on the home page, click on the menu and you will see that the main title (Neat Production) is on 3 lines. The issue the third line where we can see only the last “N” of the title.

I tried on different screen resolution and they all show up on the same way.

If you click on other pages, the title shows up perfectly.

Have a great day!

Sincerely,

Alex


#10

Hi,

Ok, I can see the issue now, I thought you meant the regular menu, not the mobile slide-panel, you can make the logo size on your homepage the same as on other pages with this Custom CSS:

.mobile-branding .site-title {
    font-size: 22px !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba


#11

Hi Csaba,

Thank you a lot for helping me with this!

I just tried it out and it works perfectly.

Thank you again and wish you a great Friday and weekend!


#12

Hi,

Great! You’re most welcome! If you need help with anything else, please open a new topic.

Have a nice day!

Kind Regards,
Csaba