Solved

Who won't my "@media screen" kick in correctly?

Posted on 2014-01-16
3
176 Views
Last Modified: 2014-01-16
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(images/header_logo_480.png);
background-repeat:no-repeat;
}
}

@media screen and (max-width: 320px) {
#header_graphic {
height:84px;
width:480px;
margin:auto;
text-align:center;
background-image:url(images/header_logo_320.png);
background-repeat:no-repeat;
}
}

@media screen and (max-width: 768px) {
body {
height:84px;
width:768px;
margin:auto;
text-align:center;
background-image:url(images/header_logo_768.png);
background-repeat:no-repeat;
}
}

@media screen and (max-width: 1024px) {
body {
height:84px;
width:768px;
margin:auto;
text-align:center;
background-image:url(images/header_logo_1024.png);
background-repeat:no-repeat;
}
}

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?
0
Comment
Question by:brucegust
  • 2
3 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39785475
Order your queries from largest to smallest, because at the moment you have
max-width: 1024px
as the last query and that is true for all screen sizes upto that width negating your prior queries for smaller screen sizes

Either that or specify the min width as well (1px more than the smaller width) e.g.

min-width:769px and max-width: 1024px
This way only the query satisfying the screen size will be used.
0
 

Author Comment

by:brucegust
ID: 39785547
That did it, Cathal! Thanks!

I've got another question I would welcome your input on at http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28340246.html

Thanks again!
0
 
LVL 58

Expert Comment

by:Gary
ID: 39785573
Already on it.
0

Featured Post

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question