Main Title Non-Responsive

[dariogentiletti]

First, thanks for the beautiful theme! The main title seems to be non-responsive for mobile. How can it be fixed (Assuming I would like to keep the same length)?

[raghudotcc]

Hi Dario,

Thanks for the kind words. Really appreciate it. May I know what is the width of the device? I have tested it on iPhone SE with up to 20 characters and it seemed to work fine, yours seems like a much longer string. We may have to reduce the size of the font or think of a different way to rearrange text in your case.

[dariogentiletti]

It is an iPhone X. Would it be possible to reduce the size of the main title for mobile then? How would I do it?

[raghudotcc]

Sorry for the delayed response.

Yes, it is possible to change the font size of the main title for smaller screens. Here is how you can do it.

1. Go to style.css and paste this line at the end of the file.

    @media screen and (max-width: 500px) {
       .siteheading h4 {
          font-size: 20px; 
       }
    }

2. Try and change the value for the font-size attribute from 20px to as per your need.

[dariogentiletti]

Hey Raghuveer, I added the snippet but it does not seem to affect in any way the mobile website. I tried to change the font size but it stays the same. Is it possible that other settings are being prioritized?

[raghudotcc]

Try site-heading instead of siteheading. That should work.

Note: I had not seen the classname earlier, it has a hyphen in it. You can check that by going to style.css and looking for site-heading.

[dariogentiletti]

I added this at the bottom of style.css, but nothing changes:

@media screen and (max-width: 500px) {
  .site-heading h4 {
     font-size: 9px; 
  }
}