My website, redkrypt.com, is working perfectly on my laptop, but the css will only load on my iPhone 4S after I rotate it once. After I do so, it works both vertically and horizontally. I've tried everything I know including adding
<meta name="viewport" content="width=device-width,initial-scale=1">
and distinguishing between with and device with in my media queries, but nothing seems to work. Any suggestions?
Think this is because you are using media queries in the link tags instead of in the css itself. The browser then loads the files based on the queries and the current screen size, instead of all at once (which also would be not very efficient in your case!). So for each defined size, you now have a separate css file which also uses redundant styles. Think you are better off with using ONE CSS file, and set the media queries inside. This way maintenance should be way easier and you also will avoid the problem you mentioned. Also, why do you use this many screen sizes? Usually you shouldnt need to add more than 3-4 sizes, but you already have 10 files. Also consider using percentages in your layout instead of fixed pixel values, your CSS isn't really responsive anyways, i.e. still fails at many sizes. You can test your responsive design also in a desktop browser by simply narrowing your window. Make sure content isn't cut off at any size.