Solved

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

Posted on 2014-01-16
3
180 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 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Change box shadow 1 35
How can I make a div layout like the one in the image 2 45
tiled banner 2 13
.CSS HTML Help 3 29
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 …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

730 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