I'm putting a mobile version of my website together and I'm using the @media screen dynamic to ensure my screens are properly formatted for phones and tablets.
In the past, I've only concerned myself with phones and that may be why whatever I'm doing now didn't surface as a problem, because now with the additional sizes, I'm running into trouble.
Currently I've got my stylesheet set up like this:
@media screen and (max-width: 480px) {
#header_graphic {
height:84px;
width:480px;
margin:auto;
text-align:center;
background-image:url(image
s/header_l
ogo_480.pn
g);
background-repeat:no-repea
t;
}
}
@media screen and (max-width: 320px) {
#header_graphic {
height:84px;
width:480px;
margin:auto;
text-align:center;
background-image:url(image
s/header_l
ogo_320.pn
g);
background-repeat:no-repea
t;
}
}
@media screen and (max-width: 768px) {
body {
height:84px;
width:768px;
margin:auto;
text-align:center;
background-image:url(image
s/header_l
ogo_768.pn
g);
background-repeat:no-repea
t;
}
}
@media screen and (max-width: 1024px) {
body {
height:84px;
width:768px;
margin:auto;
text-align:center;
background-image:url(image
s/header_l
ogo_1024.p
ng);
background-repeat:no-repea
t;
}
}
Seems right, yeah?
If you head out to
http://www.brucegust.com/NHBC/mobile/about.php, you'll see my header graphic is way too stinkin' big. The images are in place and they are accurate, but instead of a header graphic that's 320px across, I'm getting one that's way bigger.
What am I doing wrong?