CODEWITHSUNDEEP
cssmobileoverriding
user1548172
user1548172

Reputation:

COMPLETELY override css for mobile browsers?

So I'm using an @media query to use a different css file on the mobile version of my site. Here's the head of my html:

<link rel="stylesheet" type="text/css" media="screen,projection" href="<?php bloginfo('stylesheet_url'); ?>" title="Simplr" />

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

However, I'm finding that the mobile css just 'adds' to the desktop css, rather than having the desired effect of only loading the css rules in mobile.css. For example, having a single rule about the background color being red in mobile.css, won't just give me some unformatted web content with a red background, but will render the desktop css with a red background.

I want to completely start from scratch building up a nice, functional view of the site on mobiles with a blank css file, but I don't want to have to manually undo the many tweaks I've done to make the site nice for desktop. In particular, I'd like to be able to eliminate the chance of some stray desktop css preventing the site from rendering with the correct proportions on mobile.

Any thoughts?

Upvotes: 1

Views: 5482

Answers (6)

Xhynk
Xhynk

Reputation: 13860

Whether you link "only screen and (max-device-width: 800px)" or build into your css " @media @..."

You need to envelope the "desktop" styles in order for the mobile to not recognize them at all.

so basically

only screen and (max-device-width: 800px) - for your mobile devices

and

only screen and (min-width: 801px) - for desktops

Upvotes: 0

Henrik
Henrik

Reputation: 4044

Note that all platforms will use "@media screen", so you cannot do reliable device detection with the media type alone. Most commonly you will use the device-width to help you make educated guesses at what type of device the client will be.

Devices with high DPI are usually pretending they are smaller, so both the iPhone 3GS and the iPhone 4 (for example) can be matched with the same set of queries.

Upvotes: 0

Lowkase
Lowkase

Reputation: 5699

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

<link media="only screen and (min-device-width: 801px) and (max-width:9999px)" href="<?php bloginfo('stylesheet_url'); ?>" title="Simplr" type="text/css" rel="stylesheet" />

Upvotes: 3

Marcin
Marcin

Reputation: 49826

If you're putting your mobile stuff last, then you could add a CSS reset to the top of your mobile stylesheet.

Upvotes: -1

Mike Brant
Mike Brant

Reputation: 71384

Use your media queries in a conditional fashion like this:

@media screen and (max-width: 800px) {
  <link to mobile stylesheet
}

@media screean and (min-width: 801px) {
  <link to full stylesheet
}

Upvotes: 0

Andy
Andy

Reputation: 14575

Wrap your desktop css in a media query that targets desktops

Upvotes: 1

Related Questions