Increase Font size (in mobile view only)

[noort]

While reading the website on an iPad, I discovered the standard font is a bit small.
I’d like to increase that font size, using custom css in the child-theme, affecting the mobile site only. The thing is, I can’t inspect the ‘mobile-css’ using firebug.

Thanks.

Topic

[Jason Bobich]

Hello,

The thing is, I can’t inspect the ‘mobile-css’ using firebug.

Actually, you can! 🙂 … Simply scale the browser window down to the size of the viewport you’re targeting and voila.

But anyway, the way this is all works is by understanding the basics of how to use @media queries in your CSS to target different viewport sizes. Here are some examples of how you might structures different scenarios, with the viewport sizes we target in the theme:

/* Applied everywhere, at all viewports */
.whatever {
	...
}
.whatever-else {
	...
}

/* Tablets and below */
@media (max-width: 992px) {	
	.whatever {
		...	
	}
	.whatever-else {
		...
	}
}

/* Mobile and below */
@media (max-width: 767px) {	
	.whatever {
		...	
	}
	.whatever-else {
		...
	}
}

/* Everything ABOVE mobile */
@media (min-width: 768px) {	
	.whatever {
		...	
	}
	.whatever-else {
		...
	}
}

/* Everything ABOVE Tablet */
@media (min-width: 993px) {	
	.whatever {
		...	
	}
	.whatever-else {
		...
	}
}

So for example, if you wanted to change the body text of just tablet and mobile (i.e. 992px and below), you’d have something like this:

@media (max-width: 992px) {	
	body {
		font-size: 16px;	
	}
}

[Author]

Replies