?
Solved

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

Posted on 2014-01-16
3
Medium Priority
?
186 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

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 add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Suggested Courses
Course of the Month8 days, 7 hours left to enroll

765 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