Customize the styles for different device

[Fay Hui]

Hi Bill,

Sorry to send so many questions at once. Please take your time.

I found that the logo, tagline, and a text widget do not display well on the iphone or Android phone. For example, the logo, tagline looks like they are align to the right and out of the screen area… I noticed that all those components that do not displayed well on the phone are those that I have custom css class for. So I removed all the custom css class from Theme options to test it. All displayed fine on the phone after I removed the custom style classes.

Why is it? Is there a way to conditionally customize the style for different device?

Thanks,
Fay

[Bill Robbins]

Fay,

No problem at all. You can target different devices–specifically screen or browser sizes–to give your visitors the experience you’re shooting for.

I use something called “media queries” in our styles to select how different elements change at different screen sizes. Here’s an example from the style.css file:

@media only screen and (min-width: 768px) and (max-width: 1023px) {
	
	.wrap {
		width: 750px;
	}

}

That will change the .wrap div to 750px from the default when the visitor’s browser size is between 768 and 1023 pixels.

There is a section at the bottom of the style.css file that contains several media queries. You might use that as a guide as you make changes to the styles so everything still looks as expected on your mobile devices.

If I can help, let me know.

Enjoy your week,
Bill

[Author]

Posts