"Tiny headings at low resolutions" (#1193804) / CodexThemes

Comments

1
bencrossley started the conversation
June 3, 2017 at 10:24am
Hi,
I am having an issue with headings becoming very small when viewing a page at a low resolution (mobile).
As shown in the attached image, this problem seems to affect H1, H2 and Subtitle text.
The issue does not seem to occur on the example pages at codexthemes.com, but if I view the same pages on my own wordpress site, the size difference can be seen (also attached).
Is this a bug or is there a way to change how the text scales down?
Thanks very much,
Ben
1 Like

7,122

Oliver replied

June 5, 2017 at 7:56am

HI!

here is an example of CSS for controlling font size for mobile:

@media (max-width: 1000px) {
h1, .title-h1 {
    line-height: 30px !important;
    font-size: 30px !important;
}
h2, .title-h2 {
    line-height: 30px !important;
    font-size: 30px !important;
}
}
@media (max-width: 768px) {
h1, .title-h1 {
    line-height: 30px !important;
    font-size: 30px !important;
}
h2, .title-h2 {
    line-height: 30px !important;
    font-size: 30px !important;
}
}
@media (max-width: 500px) {
h1, .title-h1 {
    line-height: 30px !important;
    font-size: 30px !important;
}
h2, .title-h2 {
    line-height: 30px !important;
    font-size: 30px !important;
}
}

Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list.

Regards, Oliver

1
bencrossley replied
June 10, 2017 at 9:10am
Thanks, that solved the problem!
7,122
Oliver replied
June 12, 2017 at 7:30am
You are welcome!
Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list.

Regards, Oliver