CSS media queries not working as I planned

[jlknauffSDM]

Note I said “as I planned” rather than “properly” ;)

I currently have two media queries, on for 480 and under, another for 1024 and under.

Some things work at both resolutions (like the container widths-.wrapper, #head, #content, etc.) but other things just get picked up from the last query. For example, I set the bg color to #cccccc for 1024, but it shows up on my iphone. (480 and under)

I can’t seem to figure out what the hell I did wrong. Does anyone see what I missed?

• Responsive CSS is on lines 248-318.

Thanks in advance!

[Paulie_D]

No link provided, unfortunately.

However

one for 480 and under, another for 1024 and under.

These could clash..if you think about it.

You should be thinking about

480 and under

and

over 480

[jlknauffSDM]

Damn it…

http://usamdt.com/

Here is it’s easier:

@media only screen and (max-width: 480px) {

body.home { background: #ffffff; }

.whyusamdt1 { display: block; width: 300px; height: 218px; background-size: 300px 218px; margin: 0; }
.whyusamdt2 { display: block; width: 300px; height: 193px; background-size: 300px 193px; margin: 0; padding: 2.5em 0 0 2.5em; }
.whyusamdt3 { display: block; width: 300px; height: 129px; background-size: 300px 129px; margin: 0; }
.whyusamdt4 { display: block; width: 300px; height: 168px; background-size: 300px 168px; margin: 0; padding: 2.5em 0 0 2.5em; }

.whypar, .whylink { font-size: 90%; line-height: 1.25; }

.whyusamdt1 .whypar { margin: -1.5em 0 0 3em; }
.whyusamdt2 .whypar { margin: -3em 0 0 1.5em; }
.whyusamdt3 .whypar { margin: -1.5em 0 0 2.5em; }
.whyusamdt4 .whypar { margin: -2.75em 0 0 1.5em; }
.whyusamdt1 .whylink { margin: -1em 0 0 3em; }
.whyusamdt2 .whylink { margin: -1em 0 0 1.5em; }
.whyusamdt3 .whylink { margin: -1em 0 0 2.5em; }
.whyusamdt4 .whylink { margin: -1em 0 0 1.5em; }

.map { display: none; }
.locallist { display: block; }

.wrapper, #head, .logo, #content { max-width: 320px; width: 95%; margin: 0 auto; }
#contact { margin-top: 4em; }
body.page-template-map-page-php #content { margin-top: 2em; }
.hqnav, .nav, .scrollcontact, #layerslider_1, li.googleplus, li.linkedin, li.pinterest { display: none; }
.logo-img { margin: 0 0 0 68px; padding: 10px 0 0 0; }
.mobilenav { display: block; }

#sidebar { width: 320px; display: block; margin: 0; padding: 0; border: 0; }
h1 { font-size: 1.75em; }
.footer { font-size: 80%; }

}

@media only screen and (max-width: 1024px) {

body.home { background: #cccccc; }

.whyusamdt1 { display: block; width: 300px; height: 218px; background-size: 300px 218px; margin: 0; }
.whyusamdt2 { display: block; width: 300px; height: 193px; background-size: 300px 193px; margin: 0; padding: 2.5em 0 0 2.5em; }
.whyusamdt3 { display: block; width: 300px; height: 129px; background-size: 300px 129px; margin: 0; }
.whyusamdt4 { display: block; width: 300px; height: 168px; background-size: 300px 168px; margin: 0; padding: 2.5em 0 0 2.5em; }

.whypar, .whylink { font-size: 90%; line-height: 1.25; }

.whyusamdt1 .whypar { margin: -1.5em 0 0 3em; }
.whyusamdt2 .whypar { margin: -3em 0 0 1.5em; }
.whyusamdt3 .whypar { margin: -1.5em 0 0 2.5em; }
.whyusamdt4 .whypar { margin: -2.75em 0 0 1.5em; }
.whyusamdt1 .whylink { margin: -1em 0 0 3em; }
.whyusamdt2 .whylink { margin: -1em 0 0 1.5em; }
.whyusamdt3 .whylink { margin: -1em 0 0 2.5em; }
.whyusamdt4 .whylink { margin: -1em 0 0 1.5em; }

.map { display: none; }
.locallist { display: block; }

.wrapper, #head, .logo, #content { max-width: 800px; width: 95%; margin: 0 auto; }
#contact { margin-top: 4em; }
body.page-template-map-page-php #content { margin-top: 2em; }
.hqnav, .nav, .scrollcontact, #layerslider_1, li.googleplus, li.linkedin, li.pinterest { display: none; }
.logo-img { margin: 0 0 0 75px; padding: 10px 0 0 0; }
.mobilenav { display: block; }

#sidebar { width: 320px; display: block; margin: 0; padding: 2em 0 0 100px; border: 0; }
h1 { font-size: 1.75em; }
.footer { font-size: 80%; }

}

[Paulie_D]

Take this

@media only screen and (max-width: 1024px)

and make it

@media only screen and (min-width: 481px) 

or

@media only screen and (min-width: 481px) and (max-width: 1024px)

[jlknauffSDM]

Paulie_D, thank you! That worked perfectly!

[Author]

Posts