Home Block text size for Mobile

[pablo talhouk]

Dear Bill, I like a lot the responsive of the site on computers and mobile sites. Also that the text size of the home blocks can be changed using the theme options. But i would like to configure the text smaller in mobile sites and bigger in computers.

Is there a way to configure the text of the home blocks to be different for mobile viewers?

Best regards!

[Bill Robbins]

Hello Pablo,

Great question. It is possible to change the font size on smaller screens. Here’s how to do that:

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) {
   
   	body .content-area h2 {
   		font-size: 60px !important;
   	}
   	
   	.content-area p {
   		font-size: 16px;
   	}
   
   }
   

3. Update your settings.

Just change the 60px in the snippet above to adjust the size of the home block titles and the 16px to change the regular text.

The 520px in the snippet above sets the screen-size threshold where the changes will be applied. You can adjust that to a larger or smaller size if you need to.

Let me know if you have any questions,
Bill

[pablo talhouk]

Great! Thanks!

[Bill Robbins]

Anytime Pablo 🙂

[Author]

Posts