CODEWITHSUNDEEP
css
AKor
AKor

Reputation: 8882

Mobile stylesheet interfering with main stylesheet

I have my mobile stylesheet as such:

<link rel='stylesheet' media='only screen and (max-device-width: 480px)' href='css/mobile.css' type='text/css' />

And my main stylesheet as such:

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

When I go on the page from a mobile device, it has a mix of mobile and main stylesheet rules. How can I make the mobile stylesheet be exclusive to mobile devices, and the main stylesheet exclusive to the screen?

Upvotes: 0

Views: 562

Answers (2)

Mechwd
Mechwd

Reputation: 400

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='css/mobile.css' type='text/css' />

Also make sure you have this in your head:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Upvotes: 2

jacobangel
jacobangel

Reputation: 6996

Well, your problem is that both devices use screens. Your css/style.css file targets any devices that uses a screen, and any styling should be as applicable to a narrow device as it is to a wide device. You may need to refactor your style rules.

Also, make sure that your mobile stylesheet is listed after the generic screen one, or else the generic screen stylesheet will override the mobile one.

Upvotes: 0

Related Questions