I’m working on my first “serious” website and I have problem with the CSS style on mobile devices.
Everything works fine and responsive on a big screen but when I open my website on a tablet or a smartphone it doesn’t show the CSS style until I change the orientation of the device. For example: on a smartphone the CSS is missing until I turn it to landscape, it picks up the CSS from the tablet version, than turn it back and the CSS for phone appears. The same on tablets: no CSS but when I turn it to landscape, it picks up the big screen CSS style, than turn it back and the tablet CSS appears.
My three CSS stylesheets are linked to my HTML.
This is what I have:
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”/>
<link href=“CSS/phoneNav.css” rel=“stylesheet” type=“text/css” media=“screen and (max-width:480px)”/>
<link href=“CSS/tabletNav.css” rel=“stylesheet” type=“text/css” media=“screen and (min-width:481px) and (max-width:768px)” />
<link href=“CSS/pcNav.css” rel=“stylesheet” type=“text/css” media=“screen and (min-width:769px)”/>.
Do you have a link to the page so we can check for ourselves?
The code above looks ok and should work.
However you are targeting specific device sizes and there are millions of variations around all with their own widths so does depend on the device you are testing. You really should be concentrating on the layout and just concentrating on the design width rather than device width and just make sure the layout displays throughout the whole range rather than at specific breakpoints. This of course means that you need a fluid layout approach rather than a series of fixed width designs.
I would also avoid the three linked CSS files and instead keep your rules in one CSS file using media query blocks.
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
body{background:red}
body:after{content:"desktop"}
@media screen and (max-width:768px){
body{background:blue}
body:after{content:"768px and smaller"}
}
@media screen and (max-width:480px){
body{background:green}
body:after{content:"480px and smaller"}
}
</style>
</head>
<body>
</body>
</html>
That should just be one external css file.
Or reverse the process for mobile first using min-width.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
body{background:green}
body:after{content:"mobile"}
@media screen and (min-width:481px){
body{background:blue}
body:after{content:"481px and larger"}
}
@media screen and (min-width:769px){
body{background:red}
body:after{content:"769px and larger"}
}
</style>
</head>
<body>
</body>
</html>
Try either of those 2 files on your mobile device and see if you get the same results that resizing a desktop browsers will give.
I have tried on iPhone 5, iPad Mini and Samsung Galaxy. The problem was that it just didn’t pick up any CSS until I changed the orientation. Once it did that, the page worked just fine.
So now I’m trying to merge my 3 different CSS stylesheets in one CSS stylesheet in my index page. This is what I did:
@media screen and (min-width:769px){
body:after{content:“769px and larger”}
…content of css style for pc…
}
@media screen and (min-width:481px){
body:after{content:“481px and larger”}
…content of css style for tablet…
}
@media screen and (max-width:480px){
body:after{content:“480px and smaller”}
…content of css style for phone…
}
Result: on my pc it shows the tablet css and if I resize my screen it shows the phone but it doesn’t show the pc css at all. Also, at the very bottom of the page it shows “480px and smaller” and I can assure you all my brackets are closed properly.
@media screen and (min-width:769px){
body:after{content:"769px and larger"}
}
@media screen and (min-width:481px){
body:after{content:"481px and larger"}
}
The first rule you say ‘anything larger than or equal to 769px then do this …’
However in the next rule you say ‘anything larger than or equal to 481px then do this …’
That means that any similar rules for the first media query will be over-written in the second media query because of the cascade as the first rule becomes redundant because anything larger than 481px of course will affect anything larger than 769px.
If you reverse the order of the min-width rules then they will work.
@media screen and (min-width:481px){
body {background:red}
}
@media screen and (min-width:769px){
body{background:blue}
}
Run this in your browser and open and close the window and you will see the body background colour change from red to blue (note that the :after rules in my original demo were just to show that the breakpoints were causing a content change and not part of any required routine).
If you were using max-width media queries then you start with the smallest first and then work larger (the opposite of what you do with the min-width media queries).
Remember that in each media query you are just modifying the base code and not creating massive separate rules for each device.
You declare your base css as normal which is applied to all devices and then you modify certain elements only using media queries. This keeps code to a minimum and makes it more manageable. (If you use a mobile first approach then the normal css rules apply to all devices but specifically mobile and then you enhance with min-width media queries for larger devices. I tend to do the opposite and start with the desktop layout in the normal css and then use max-width media queries for the smaller devices. I realise this isn’t best practice but suits the way I work.)
