- Posts
Hello, I am having a difficult time adjusting the fonts on my website for mobile. Both my site header and the header in my first block are not resizing when I use custom CSS with a media query. When viewed on mobile these large fonts wrap and do not provide the look we want.
I found a previous post https://www.boldgrid.com/support/question/change-font-size-for-mobile-screens/ that indicated I should use something along these lines:
@media only screen and (max-width: 767px) {
h1, h2, h3 {
font-size: 20px;
}
}But it doesn’t seem to have any effect, even when I reload the page with Shift+f5
I have checked that the text code does not contain any explicit font size for the font in the first block on the page, and it is not clear to me how to check the site header as I don’t see how to check the text code of that element.
I would appreciate any guidance or suggestions that anyone might have!
Thank you,
Dave.Hi Dave,
Thanks for reaching out and thank you for using Crio Pro WordPress theme!
To change the site title with custom CSS you could use something like:
@media only screen and (max-width: 767px) { .site-header a { font-size: 20px !important; } }For the other headings try adding an
!importanttag to your font-size element so the browsers knows to specify that bit of CSS:@media only screen and (max-width: 767px) { h1, h2, h3 { font-size: 20px !important; } }We also have a useful guide for working with heading font sizes that you can use to learn more about changing font sizes in the customizer.
I hope this helps! Please reach back out to us if your have any other questions.
Thanks for the informative response Brandon, I appreciate it!
When I use your suggested code in the CSS/JS Editor of the Customize menu it does exactly what I need it to and as I adjust the pixel width I can see it change while in the Customize menu. However when I publish and then visit the site on mobile or even view it in WordPress through the page editor as a mobile it doesn’t adjust the font size.
I did review the page you included but don’t see anything that might prevent the mobile resizing and I am not explicitly setting font size in the html:
<h3 class="h1" style="color: #ffffff; text-align: right; text-transform: uppercase;">Exceeding Your Expectations with World Class Customer Service</h3>Is there anything else that I need to look for or modify to have the CSS applied outside of the Customize view?
Thank you for your help,
Dave.Hmmm that sounds like it could be related to caching. Try clearing any cache (including browser cache) related to your website then try refreshing to see if the changes take effect.
Thank you Brandon, that was all it was and while I thought I had done that after making the changes, I am sure grateful for your hand holding! Have a great day and thanks again for your support! 🙂
Take care,
Dave.
- The topic ‘How Can I Change Font Size for Mobile Devices With Custom CSS?’ is closed to new replies.
