Mobile -Change Hero Title/Text Font Size

[Ashley Davis]

Hi Bill,

Just officially launched another site, but am running into a few issues with the mobile version. (I’m viewing with an iPhone4)

Any way to reduce the size of the Hero Title/Text on just the mobile version? As is, the captions are completely covering the Home page images.

Also, the Down Arrow is overlapping the captions on my About and Features pages. Can we remove the down arrow all together for the mobile version, or significantly reduce its size?

Lastly, is there any way to have a pop-up message appear when anyone uses a mobile device to access the site? I think the site looks much better when turned horizontal and would love to recommend users rotate their phones for mobile viewing.

Thanks So much! This is a FANTASTIC theme and over all very easy to use and customize! My client is absolutely thrilled with the results!

-Ashley

[Bill Robbins]

Good Morning Ashley,

You can change the text size on smaller screens. You’ll need a media query which is a simple set of conditions that when they are met, the included styles will be used. Here’s what to do:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (max-width: 520px) {
   	
   	#hero-section .hero-copy h2.hero-title  {
   		font-size: 24px;
   	}
   	
   	#hero-section .hero-copy p {
   		font-size: 16px;
   	}
   
   }
   

   The first line is the media query. “Only screen” lets the browser know these are only for screens and not for print. The “and” says another condition must be met as well. The “max-width: 520px” lets the browser know that the maximum size of the browser window where these styles will be used is 520 pixels. Anything larger than that and these styles will be ignored.

   You can change the font sizes there to fit your needs.

3. Update your settings.

See how that works out for you,
Bill

[Ashley Davis]

Thanks Bill! The text adjustments worked great.

So to adjust the Hero Button Text size, would I just add this to the code?

#hero-section .hero-copy button-text {
font-size:16;
}

Any ideas on the down arrow issue or adding a pop-up message?

Thanks!
Ashley

[Ashley Davis]

Oh, and one more thing! How can I reduce the mobile logo size?

Attachments:

1. 

   image.png
   

[Bill Robbins]

You’re barking up the right tree for the button. This should let you change it:

@media only screen and (max-width: 520px) {

	.hero-copy .button.hero,
	.woocommerce .hero-copy .button-hero {
		font-size: 12px;
	}
	
	.scroll-down {
		display: none;
	}

}

That’ll also hide the arrow on small screens.

---

It’s likely possible to have a pop-up do that, but it’s not something that I’ve tried before. I know OptinMonster has that as an option, but only on their Pro and up plans which is pretty pricy.

Bill

[Ashley Davis]

After taking a closer look at the Mobile site, I would also like to adjust the size of the Logo, as well as the size of the Body and Heading text in the main copy. Seems everything is quite too big for mobile devices.

Thanks Bill!

[Bill Robbins]

Inside that media query you could add a new style for #logo where you specify a width. You could also add a style for the body where you set a font size. Same for the headings too.

I’m glad to hear you’ve signed up for css classes. If you need more customization help let me know and I can write up a quote for you.

Take care,
Bill

[Author]

Posts