Skip to content

Commit

Permalink
Reorganize media queries
Browse files Browse the repository at this point in the history
  • Loading branch information
@javasteve99
javasteve99 committed Mar 21, 2015
1 parent 95d8daa commit ae7c330
Showing 1 changed file with 168 additions and 156 deletions.
324 changes: 168 additions & 156 deletions css/style.css
View file
Expand Up @@ -137,6 +137,25 @@ section {
vertical-align: top;
}

@media (max-width: 480px) {
section {
padding: 20px;
}

.button {
width: 100%;
text-align: center;
}

.horizontal-list {
padding-bottom: 10px;
}

.horizontal-list li {
display: block;
}
}

/* Header =================================================================== */
/* ========================================================================== */

Expand Down Expand Up @@ -184,6 +203,62 @@ header .container {
max-width: 100%;
}

@media (max-width: 795px) {
.logo {
margin: 0 10px 20px 10px;
}
}

@media (max-width: 760px) {
.logo {
width: 207px;
height: 251px;
background-size: 80%;
}
}

@media (max-width: 720px) {
.logo {
width: 187px;
height: 231px;
background-size: 85%;
}
}

@media (max-width: 690px) {
header {
height: auto;
}

.logo {
background-image: url("../img/JGilstein-Logo-Horizontal.png");
position: absolute;
width: 300px;
height: 121px;
margin: 0;
top: 0;
left: 50%;
margin-left: -150px;
}

nav {
position: relative;
padding-top: 140px;
}

.button.nav {
margin-top: 0;
margin-bottom: 20px;
}
}

@media (max-width: 480px) {
.button.nav {
width: 90%;
margin: 0 auto 10px auto;
}
}

/* Example Blocks =========================================================== */
/* ========================================================================== */

Expand Down Expand Up @@ -256,6 +331,48 @@ header .container {
.example-Y:before { background-image: url("../img/Y.png"); }
.example-Z:before { background-image: url("../img/Z.png"); }

@media (max-width: 630px) {
.example {
padding: 140px 20px 10px 20px;
}

.example:before {
right: 0;
height: 130px;
width: auto;
bottom: none;
}

.example .button {
position: static;
}
}

@media (max-width: 480px) {
.example {
margin: 20px 0 0 0;
}

.example .button {
position: absolute;
width: 50%;
margin-top: 22px;
margin-left: -10px;
}
}

@media (max-width: 430px) {
.example {
margin: 20px -20px 0 -20px;
}

.example .button {
width: 35%;
margin-top: 12px;
margin-left: -15px;
}
}


/* Testimonial Blocks ======================================================= */
/* ========================================================================== */
Expand All @@ -278,6 +395,29 @@ header .container {
background-position: left top;
}

@media (max-width: 795px) {
.testimonial {
padding: 20px 0 0 130px;
margin-right: 0px;
}

.testimonial:before {
left: 0px;
}
}

@media (max-width: 720px) {
.testimonial {
padding: 20px 0 0 0;
}

.testimonial:before {
position: static;
height: 60px;
width: 82px;
}
}

/* Services List ============================================================ */
/* ========================================================================== */

Expand Down Expand Up @@ -350,195 +490,67 @@ header .container {
.services-list li .z:before { content: "Z"; }
.services-list li .amp:before { content: "\0026"; }

@media (max-width: 530px) {
.services-list li {
width: 175px;
}

/* About Section ============================================================ */
/* ========================================================================== */

.about {
padding-top: 135px;
.services-list li a:before {
width: 120px;
height: 120px;
}
}

/* Footer styles ============================================================ */
/* ========================================================================== */

footer a {
color: #dfdccd;
@media (max-width: 480px) {
.services-list li a:before {
line-height: 125px;
}
}

footer {
background: #a16d33;
margin: 0 -20px;
margin-top: 30px;
padding: 5px 0;
color: #dfdccd;
font-family: 'Rosario', sans-serif;
}

/* Media Queries ============================================================ */
/* About Section ============================================================ */
/* ========================================================================== */

@media (max-width: 795px) {
.testimonial {
padding: 20px 0 0 130px;
margin-right: 0px;
}

.testimonial:before {
left: 0px;
}

.logo {
margin: 0 10px 20px 10px;
}
.about {
padding-top: 135px;
}

@media (max-width: 760px) {
.logo {
width: 207px;
height: 251px;
background-size: 80%;
}

.about {
padding-top: 90px;
}
}

@media (max-width: 720px) {
.logo {
width: 187px;
height: 231px;
background-size: 85%;
}

.about {
padding-top: 60px;
}

.testimonial:before {
position: static;
height: 60px;
width: 82px;
}

.testimonial {
padding: 20px 0 0 0;
}
}

@media (max-width: 690px) {
.logo {
background-image: url("../img/JGilstein-Logo-Horizontal.png");
position: absolute;
width: 300px;
height: 121px;
margin: 0;
top: 0;
left: 50%;
margin-left: -150px;
}

nav {
position: relative;
padding-top: 140px;
}

.button.nav {
margin-top: 0;
margin-bottom: 20px;
}

header {
height: auto;
}

.about {
padding-top: 20px;
}
}

@media (max-width: 630px) {
.example .button {
position: static;
}

.example-one:before,
.example-two:before,
.example-three:before,
.example-four:before {
right: 0;
height: 130px;
width: auto;
bottom: none;
}

.example {
padding: 140px 20px 10px 20px;
}
}

@media (max-width: 530px) {
.services li {
width: 175px;
}

.services li a:before {
width: 120px;
height: 120px;
}
}

@media (max-width: 480px) {
.button.nav {
width: 90%;
margin: 0 auto 10px auto;
}

.horizontal-list li {
display: block;
}

.horizontal-list {
padding-bottom: 10px;
}

.button {
width: 100%;
text-align: center;
}

section {
padding: 20px;
}

.about {
.about {
padding-top: 20px;
}
}

.services li a:before {
line-height: 125px;
}

.example .button {
position: absolute;
width: 50%;
margin-top: 22px;
margin-left: -10px;
}
/* Footer styles ============================================================ */
/* ========================================================================== */

.example {
margin: 20px 0 0 0;
}
footer a {
color: #dfdccd;
}

@media (max-width: 430px) {
.example {
margin: 20px -20px 0 -20px;
}

.example .button {
width: 35%;
margin-top: 12px;
margin-left: -15px;
}
footer {
background: #a16d33;
margin: 0 -20px;
margin-top: 30px;
padding: 5px 0;
color: #dfdccd;
font-family: 'Rosario', sans-serif;
}

0 comments on commit ae7c330

Please sign in to comment.