Help with media queiry for smart phone

HTML & CSS
1

Hi
I am a student doing work study and designing my first web site with media queries for a client. I used these media quieries and css style sheets successfully
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<meta name=“viewport” content=“width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1” />

<title>Home</title>

<link rel=“stylesheet” type=“text/css” href=“css/CAN.css”/>
<!-- CAN_medium –>
<link rel=“stylesheet” type=“text/css” media=“only screen and (min-width:501px) and (max-width:800px)” href=“css/CAN_medium.css”/>
<!-- CAN_small –>
<link rel=“stylesheet” type=“text/css” media=“only screen and (min-width:50px) and (max-width:500px)” href=“css/CAN_small.css” />

But I cannot get my media query for my iphone to work. I put it in my CAN. css file below…Can anyone help? Is my meta tag above right? Should I do it differently? Is it even the right code? I am soo stumped as to why it’s not working…obviously I have a lot to learn :-?

/smartphones (portrait and landscape)–/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {

#header {
height: 80px;
background-image: url(…/images/logo320.jpg);
background-repeat: no-repeat;
background-position: left 0px;
background-color: #c55b19;
}
#footer {
background-color: #ee6a1b;
height: 30px;
border: thin solid #274b1b;
}
Content {
font-size: 10px;
color: #274b1b;
height: auto;
background-color: #FFF;
border: 1px solid #274b1b;
text-align: center;
}
}

2

Hi charrcs. Welcome to the forums. :slight_smile:

If you have alternate rules for these elements in the third CSS file, that third CSS file will override the first, as it comes later, and the iPhone will read the styles in the third style sheet, as its dimensions are within those limits (e.g. 50px and 500px).

3

Thanks I am aware of the order and I’ve tried it without the styles for a smaller browser in the first Can.css file and it didn’t work for my iPhones. It works in my browsers just fine though. I guess I should have noted that. Since the small.css file didn’t work I put it in the first css file, taking it out doesn’t change things. It still doesn’t work.

In my iPhones it picks up the css code for the first CAN.css but the background image doesn’t show up??? Once again thats just in my iPhones.

4

As always, a link is worth a thousand words. All sorts of things could be happening here, but we could probably see right away with a link.

5

oh sooo embarrassed!!! So much wasted time! My small.css was not on my server!!! Apparently it hadn’t uploaded successfully and I missed it. Thanks for your help. I won’t make that mistake again…

6

Hehe, no problem. It happens to all of us. :slight_smile: