Customizing CSS for mobile

[reekes]

Thanks to your nice framework I’ve got my child’s custom.css working well (for the desktop case).

How can I make some tweaks to the mobile style? For example, increase the font size, adjust the menus, etc.?

I was about to copy the responsive.css into my custom.css, and start hacking away but I thought I should ask first 😉

Topic

[Jason Bobich]

Hello,

The theme uses CSS @media queries to target different device viewport, which is currently a really common approach to responsive web design. So, do definitely take a look at responsive.css and see what’s going on there, but there’s no reason to just copy the whole thing.

You can setup your custom.css something like this:

/* Your styles for desktop ... */
.whatever {
	...
}
.whatever-else {
	...
}

@media (max-width: 800px) {	
	/* Your styles for tablets ... */
	.whatever {
		...
	}
	.whatever-else {
		...
	}
}

@media (max-width: 480px) {	
	/* Your styles for mobile ... */
	.whatever {
		...
	}
	.whatever-else {
		...
	}
}

[reekes]

I guess my real question was if I can just add this scaffolding and only add the specific classes I want to over-ride.

I think the answer is yes, and it’s an easy thing for me to verify.

I just wanted to check that this is the right approach, and to add this into my custom.css file. I think you answer it 😉

[Jason Bobich]

Yup, you only need to add what you want to override.

[Author]

Replies