Improve company productivity with a Business Account.Sign Up

x
?
Solved

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

Posted on 2014-01-16
3
Medium Priority
?
193 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 2000 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

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…

606 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