0

For some reason, when trying to target my stylesheet '480pxland.css' at only my mobile device(s) when it is in landscape orientation it affects everything I have (other mobile devices, iPad, my desktop and even screens larger than 1400px). Everything before my main idex page's is listed below. Hopefully someone can see why it's not affecting just the 480pxland.css sheet.Thanks!

<!doctype html>
<html lang="en">
<!--[if lt IE 7 ]> <html lang="en" class="ie6">    <![endif]-->
<!--[if lt IE 9]>
    <html lang="en" class="ie8">
    <link rel="stylesheet" type="text/css" href="/css/ie8-and-down.css" />
<![endif]-->
<!--[if IE 9 ]>   
    <html lang="en" class="ie9">
    <link rel="stylesheet" type="text/css" href="/css/ie9.css" />
<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><!--<![endif]-->
<head>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon" />
<meta charset="utf-8">
<title>Welcome to EDM Uncovered!</title>
<link href="/css/12gs.css" rel="stylesheet" type="text/css">
<link href="/css/reset.css" rel="stylesheet" type="text/css">
<link href="/css/stylesheet.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Autour+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Jura:400,600,500,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Days+One' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="/jquery/jQuery.js"></script>
<script type="text/javascript" src="/js/protoFluid3.02.js"></script>
<script type="text/javascript" src="/js/unslider.min.js"></script>
<link href="/jquery/jQuery.ui.js" rel="stylesheet" type="text/css">
<link media="screen and (max-device-width: 480px)" href="/css/480px.css" rel="stylesheet" type="text/css">
<link media="screen and (max-device-width:480px) and (orientation:landscape)" href="/css/480pxland.css" rel="stylesheet" type="text/css">
<link media="all and (min-device-width: 768px and max-device-width: 1399px)" href="/css/768px.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width: 1400px)" href="/css/1400px.css" rel="stylesheet" type="text/css">
</head>
user2325723
  • 41
  • 1
  • 5
  • Can't reproduce here. On my desktop, the stylesheet `480pxland.css` doesn't load. Change the max-width to `2480px` and it does load. So, I suspect that the 480pxland.css is not the issue in your case. Could something have happened like you accidentally edited the 480pxland.css, thinking it was one of the other css files? – Mr Lister Jul 16 '13 at 17:53
  • It ended up being the fact that I had the two separated "(orientation:landscape) and (max-device-width:480px)" instead of (max-device-width:480px and orientation:landscape). That and when I increase the max-width to 550px it finally works. Apparently my phone has a screen larger than the 480 when in landscape orientation. – user2325723 Jul 17 '13 at 22:33

0 Answers0