This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

page titles not scaling/ responsive on mobile

Resolved 8 replies premiumthemetheme-vantage
ceejayz
10 years ago · Last reply by Andrew Misplon 10 years ago

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.

URL: http://www.trnbckl.com/?page_id=19

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

8
  1. Andrew Misplon Staff 10 years, 7 months ago

    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.

  2. ceejayz 10 years, 7 months ago

    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

  3. ceejayz 10 years, 7 months ago

    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

  4. Andrew Misplon Staff 10 years, 7 months ago

    Thanks for your feedback. Please can you leave the Custom CSS in place so we can view the site with it in action.

    Thanks.

  5. Andrew Misplon Staff 10 years, 7 months ago

    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;
	}
}
  6. ceejayz 10 years, 7 months ago

    hi Andrew,
    It seems I needed to add “!important!” before the “;” to make it work..
    – thanks again!

  7. ceejayz 10 years, 7 months ago

    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;
	}
}
  8. Andrew Misplon Staff 10 years, 7 months ago

    Awesome, thanks for sharing your final solution with us. Glad to hear you made progress. All the best :)

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread