- AuthorPosts
- November 23, 2020 at 10:27 am #31621J KGuest
Hello,
I am using the Grid-One theme in a Dreamhost WP install. When viewing in mobile, text that is h2 title-main is not appropriately re-sized and instead hangs over that requires a right scroll to read. The issue is most noticeable when the word is a long word, ex: “Conservation” where the entire word at the default theme h2 title-main font size does not fit in the mobile screen width and I need to scroll to see the whole world. How can I fix this? Thank you!November 23, 2020 at 10:34 am #31646BoldGrid SupportKeymasterHello,
Thanks for contacting us – we are happy to help you adjust the font size of the h2 title-main in Grid One. Since Grid One uses a very large heading size, when using longer words we suggest using CSS Media Queries to set specific font sizes for different devices. I tested using your heading, and I found this code to work. You can copy and paste it into Customizer > Custom JS & CSS in the Custom Theme CSS section at the top of that panel:
@media (max-width:767px) { h2.title-main { font-size: 44px !important; } } @media (min-width:768px) and (max-width:1200px) { h2.title-main { font-size: 60px !important; } } @media only screen and (min-width: 1200px) { h2.title-main { font-size: 79px !important; } }
Please let us know if this worked, or if you have any other questions.
Thanks,
NicoleNovember 23, 2020 at 1:19 pm #31661JKGuestThank you – that worked!
- AuthorPosts
- The topic ‘Title-Main not responsive – text overhangs’ is closed to new replies.