Support » Themes and Templates » How to override stylesheet with mobile css

  • I have my desktop site up and running, but now am trying to style for mobile. I’ve created a ‘mobile.css’ stylesheet, and called it in the header using:

    <link rel=”stylesheet” media=”screen and (max-device-width: 950px)” href=”/example/mobile.css” />

    This stylesheet link is placed after the main stylesheet in the header. However, all of the css I add to the mobile stylesheet is being overwritten by the styles in my main stylesheet. This can be fixed using the !important tag, but I know that’s bad practice so I don’t want to add it to every single style.

    What am I missing? How do I make my mobile.css stylesheet take priority over my main stylesheet when on a mobile device?

    Thanks

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to override stylesheet with mobile css’ is closed to new replies.