Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

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

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

This article discusses four methods for overlaying images in a container on a web page
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses
Course of the Month11 days, 2 hours left to enroll

572 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