-
Posts
-
Good afternoon
I wonder if you might be able to help me. I have created a website for a client – see link below.
However, the H1 headings appear too large on a mobile device.
I searched for a solution on your website and someone recommended adding the following code:
@media only screen and (max-width: 480px) {
h1 { font-size: 24px !important; }When I did that, the size of the font on the mobile reduced, however, it reduced the width of the header and hence the navigation and logo were on top of each other, when viewed on a larger screen, so I removed the code.
Your help to work out how to reduce the size of the headings on mobile devices would be greatly appreciated.
Hey Ivana,
That code would reduce all h1 fonts. When you mentioned about the header are you referring to the section below Fullwidth slider?
The header where your logo is placed with search icon and burger menu doesn’t decrease, can you give a screenshot on the issue? so we can try to reproduce it.Best regards,
NikkoThank you for your response Nikko.
I was referring to the Header, ie. where the logo is at the top of the page. I have done screen shots of how it appears when I add the code and when I remove the code from quick CSS (please see below).
If you could advise what quick CSS code I should add to reduce the size of H1 on mobiles that would be awesome.
Many thanks
IvanaHi Ivana,
I see, I think the problem is with this code (missing a closing brace):
@media only screen and (max-width: 480px) { h1 { font-size: 24px !important; }It should be:
@media only screen and (max-width: 480px) { h1 { font-size: 24px !important; } }Hope it helps.
Best regards,
NikkoOh goodness. One little closing bracket causes so much trouble :)
Thank you so much. I greatly appreciate your help.
It seems to work just fine now.
- The topic ‘H1 size on mobile device’ is closed to new replies.