Newbie here… My site is looking as I expected using the Vantage theme Premium… all except for I can’t seem to make the page titles scale/responsive on mobile. I have selected Appearance > Theme Settings > Layout and checked the “responsive” box, and selected Layout bound: “boxed”.
I am using a large font size for page titles but expecting it to scale.
page titles not scaling/ responsive on mobile
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Ceejayz
Thanks for reaching out.
The page title is unfortunately not responsive. Add the following to Appearance > Custom CSS to resize the font under 680px resolution:
@media (max-width: 680px) { #page-title, article.post .entry-header h1.entry-title, article.page .entry-header h1.entry-title { font-size: 24px; } }Adjust the font size as required.
Hope that helps.
hi Andrew,
I tried just entering this as is and messed with the font size but not seeing a differenc… I am presuming there is something that needs to be entered before this snippet? When I added color changes snippets to the custom css I had to add /*Circle Icon Heading Color */…. Is there something similar to what needs to come before this snippet? … Really appreciate the help. – C
Hi Andrew,
I learned that the above /*…*/ is a comment. however, the code that you suggested doesn’t seem to have an effect. I think I understand that the @media tag is a query that is looking for a match on the max-width:680px, but this snippet has no effect, and changing the max-width to a lower value didn’t make a difference either. is there something more I need to add to make this match? I’ve tried it on an iPhone 4, Android 5.0.2 and Windows phone and get the same behavior on all of them.
thank you for your help –C
Thanks for your feedback. Please can you leave the Custom CSS in place so we can view the site with it in action.
Thanks.
Decreasing the breakpoint would decrease the resolution the CSS becomes applicable. To see the media query become applicable earlier on you’d need to increase it.
@media (max-width: 1024px) { #page-title, article.post .entry-header h1.entry-title, article.page .entry-header h1.entry-title { font-size: 24px; } }hi Andrew,
It seems I needed to add “!important!” before the “;” to make it work..
– thanks again!
Sorry slight correction… It looks like this now:
@media (max-width: 680px) { #page-title, article.post .entry-header h1.entry-title, article.page .entry-header h1.entry-title { font-size: 36px !important; }}Awesome, thanks for sharing your final solution with us. Glad to hear you made progress. All the best :)