Site title size on tablet & smartphone

I’m translating my Turkish site mutfaginisev.com into English using TranslatePress.
Title is MUTFAGINI SEV which translates as LOVE THY KITCHEN. Eng is longer than Tr and creates problem in mobile. It breaks into two lines :frowning:
I’ve tried editing theme.css

#masthead .site-branding h1.site-title {
  font-size: 180px;
  font-weight: 800;
  text-transform: uppercase;
  font-family: 'Ubuntu', sans-serif;
  text-shadow: 1px 2px 0px rgba(0, 0, 0, 0.2);
  margin: 30px 0px 10px 0px;
}

to no avail.
It’s been 5 years since I’ve set up this theme and used it lovingly, can someone please show me a way to fix this prob?

Thank you in advance.
Zehra

ps: I’m not that capable with css for that matter, you have to explain how it should be done.

Hello Zehra, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

@media (min-width: 768px) and (max-width: 991px) {
    #page #masthead .site-branding .site-title {
        font-size: 8vw;
    }
}

@media (max-width: 767px) {
    #page #masthead .site-branding .site-title {
        font-size: 10vw;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

Hi Roman. Thnx a million for your quick response.

Additional css didn’t help but editing theme.css
#masthead .site-branding h1.site-title {
font-size: 90px; !important;
font-weight: 400; !important;
text-transform: uppercase;
font-family: ‘Ubuntu’, sans-serif;
text-shadow: 1px 2px 0px rgba(0, 0, 0, 0.2);
margin: 30px 0px 10px 0px;
}
solved tablet and smartphone for now.
On the flip side broke the desktop appearance completely!

Sincerely,
Zehra

Hello Zehra,

Additional css didn’t help

Can you please apply the CSS code that I mentioned above and leave here a note in order to let me check why it doesn’t work?

Kind Regards, Roman.
aThemes Support

Hello Roman,
Went back to theme.css original

#masthead .site-branding h1.site-title {
font-size: 120px;
font-weight: 800;
text-transform: uppercase;
font-family: ‘Ubuntu’, sans-serif;
text-shadow: 1px 2px 0px rgba(0, 0, 0, 0.2);
margin: 30px 0px 10px 0px;
}
and added your code to additional css

desktop is still broken and tablet is two lines.
you can check at mutfaginisev.com
Regards,
Zehra

Desktop problem solved by cleaning the cache.

Hello Zehra,

I’ve just checked your site once again and it looks like the issue is already resolved, isn’t it?

Kind Regards, Roman.
aThemes Support

The problem was always with tablet and smartphone, site title in english being two rows.It’s NOT resolved!

Hello Zehra,

Did you try to clear your mobile device browser cache as well?

Kind Regards, Roman.
aThemes Support

Hello Roman,

I did clear my mobile device browser cache, it didn’t change :frowning:

Regards,
Zehra

Hello Zehra,

Here is what I see on my mobile device:

Do you see something else on yours?

Kind Regards, Roman.
aThemes Support

This is iPhone 6

and this is iPad

Hello Zehra,

I don’t think that I can provide much help here unfortunately, since I can’t recreate your issue (it looks well for me, as on my screenshot above). Hope for your understanding.

Kind Regards, Roman.
aThemes Support

Hello Roman,
You paved the way and I solved my prob changing your additional CSS as below

@media (min-width: 768px) and (max-width: 1025px) {
    #page #masthead .site-branding .site-title {
        font-size: 9vw;
    }
}

@media (max-width: 767px) {
    #page #masthead .site-branding .site-title {
        font-size: 8vw;
    }
}

Now both mobiles are fine, thank you.

Best Regards,
Zehra

1 Like

OK, you’re welcome Zehra!

Kind Regards, Roman.
aThemes Support