Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS media queries not working as I planned Reply To: CSS media queries not working as I planned

#166268
jlknauffSDM
Participant

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%; }

}