CODEWITHSUNDEEP
htmlcssmedia-queries
Alfonso Giron
Alfonso Giron

Reputation: 401

Media Query overriding

I have media queries set up for max widths of 1000px, 825px, and 760px. Everything is working properly except one line in the 760 px media query which adjusts the padding of the navigation in relation to the logo, in order to move the nav links below the logo, rather than the default alignment with the logo. It is the last line under the comment of 'Navigation' that is the issue. -

 /* Navigation */
    nav { padding-top: 80px; }
    nav > ul { padding-left: 10px; }
    }

Everything else is scaling properly on the page, except this padding adjustment is overriding all the other larger width media queries. So, the navigation has gone below the logo in all page window sizes, when it should only be happening in the 760px size. I am sure there is something wrong in the 760px query since when I delete it to test the larger sizes, they work as intended, with the nav aligned with the logo.

  /* Media Queries */

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

    h1 { font-size: 2.4em; }

    /* Header */
    header div.hero { left: 56%; }
    header div.hero h1{ margin-bottom: 20px;  }

    /* Section-Atmosphere */
    section.atmosphere article { padding-left: 400px; background-size: 375px auto; }

 }

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

    h1 { font-size: 2.2em; }

    /* Header */
    header { height: 300px; background-image: url(../images/banner_825.jpg); }
    header div.hero { top:120px; left:48%; }

    /* Section - Atmosphere */
    section.atmosphere article { padding-left: 325px; background-size: 300px auto; }

    /* Section- How To */
    section.how-to blockquote p.quote { font-size: 1.1em; line-height: 1.2em;  }
    section.how-to blockquote p.credit { font-size: .85em; }
}


@media screen and (max-width: 760px) { 
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.4em; }
    h3 { font-size: 1.1em; }
    a.btn { font-size: 1em; }
 }

 /* Header */

header a.logo { width: 145px;height: 60px; }
header div.hero { top: 140px; left:48%; }

/* Section - Main */
section.main { margin-top: 10px; margin-bottom: 10px; }
section.main aside div.content { background-size: 55px 55px; padding-top: 60px; }


/* Section- How To */
section.how-to aside div.content img { width: 85%; }

/* Navigation */
nav { padding-top: 80px; }
nav > ul { padding-left: 10px; }
}

Upvotes: 0

Views: 84

Answers (1)

Nukul Ghosh
Nukul Ghosh

Reputation: 81

Looks like you are closing the @media-query earlier then intended.

@media screen and (max-width: 760px) { 
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.4em; }
    h3 { font-size: 1.1em; }
    a.btn { font-size: 1em; }
 } // closed here

It should be closed at the end.

Upvotes: 2

Related Questions