I have two CSS sheets for my website, one main CSS, and one mobile CSS. The problem is that when viewing on a mobile device (iPhone, Android) the two style sheets get mixed up. For example, when viewing the website on an iPhone, some of the styles from the main stylesheet are being applied.
What could be causing this? Below are my CSS declarations:
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" rel="stylesheet" />
<meta name = "viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
The main.css file is going to be included whatever device you are looking at the page in, the media query part for the mobile.css will be called in for your given parameters along with the other stylesheet.
If you’re having issues with styles being included then either exclude the main.css using a media query or redeclare these styles in the mobile.css file.