User Agent Stylesheet overriding a div class

Question

I'm building a responsive grid based layout following what I learned in the CSS layouts class with Guil Hernandez . I'd post a link, but it's hosted locally right now.

Here's a video of the issue: http://screencast.com/t/UN0XKrKi

Here's the HTML:

<!doctype html>
<html lang="en">
<head>
  <title>The Practice Room - Navtest 2</title>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/grid.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,800,700,300">

</head>
<body>
   <div class="top-banner">
        <ul class="social">
          <li class="social">Facebook</li>
          <li class="social">Twitter</li>
        </ul>
  </div>
  <header class="main-header">
    <div class="grid-container">
      <div class="grid-4 main-logo">
        <img src="images/logo.png">
      </div>
          <label for="show-menu" class="show-menu">Show Menu</label>
            <input type="checkbox" id="show-menu" role="button">
              <ul id="menu">
                <li><a href="#">Purchase</a></li>
                <li>
                  <a href="#">Get Started ￬</a>
                  <ul class="hidden">
                    <li><a href="#">Directors</a></li>
                    <li><a href="#">Singers</a></li>
                  </ul>
                </li>
                <li>
                  <a href="#">Support ￬</a>
                  <ul class="hidden">
                    <li><a href="#">How To</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Features</a></li>
                    <li><a href="#">Curriculum</a></li>
                  </ul>
                </li>
                <li><a href="#">Practice</a></li>
                <li><a href="#" class="login">Login</a></li>
              </ul>
    </div>
  </header>
<div class="secondary-banner-blue"></div>
<div class="secondary-banner-green">
  <div class="grid-container">
        <div class="grid-1">
          <img src="images/home-gray.png" title="Account Dashboard" class="banner">
        </div>
        <div class="grid-1">
          <img src="images/library-gray.png" title="Exercise Library" class="banner">
        </div>
        <div class="grid-1">
          <img src="images/track-gray.png" title="Lesson Track" class="banner">
        </div>
        <div class="grid-6">
          <p class="welcome">Welcome Erin!</p>
        </div>
        <div class="grid-1">
          <img src="images/message-gray.png" title="Messages" class="banner">
        </div>
  </div>
</div>

  <div class="grid-container">
    <div class="grid-9">
      <div class="grid-container">
      <div class="grid-12">
        <p class="big">
          <a href="/index.html" class="medium-lightblue">Lessons &#187</a>
          <a href="/index.html" class="medium-lightblue">Sight Singing &#187</a>
          <a href="/index.html" class="medium-lightblue" class="group:after">Level Two </a>
        </p>
      </div>
      </div>
      <hr>
          <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom: 25px;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://player.vimeo.com/video/110632821' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
      <hr>
    </div>

    <div class="grid-3borderleft">
      <p class="big">
            <a href="/index.html"  class="medium-green">&#171 Previous</a>
            <a href="/index.html"  class="medium-green">Next &#187</a>
      </p>
      <h1>Objectives</h1>
    </div>
  </div>

   <footer class="main-footer">
    <p>&copy;The Practice Room - 2015</p>
  </footer>
</body>
</html>

Here's the grid.css

/* Global
================================ */

.grid-container {
    padding-left: 10px;
    padding-right: 10px;
    margin-left: auto;
    margin-right: auto;
}
img {
    width: 100%;
}


/* Media Queries
================================ */

@media (min-width: 1px) and (max-width: 767px)  {
    .grid-container > [class^="grid-"] {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .hide-mobile {
        display: none;
    }


}

@media (min-width: 768px) {

    /* Columns
    ================================ */

    .grid-container > [class^="grid-"] {
        float: left;
        min-height: 1px;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 2%;
    }
    .grid-container > [class^="grid-"]:first-child {
        margin-left: 0;
    }
    .grid-container > [class^="grid-"]:last-child {
        float: right;
    }

    /* Columns are 65px wide, with 20px gutters
    =========================================== */

    .grid-1 {
        width: 6.5%;
    }
    .grid-2 {
        width: 15%;
    }
    .grid-3 {
        width: 23.5%;
    }

    .grid-3borderleft {
        width: 23.5%;
        border-left: #ccc solid 1px;
    }

    .grid-4 {
        width: 32%;
    }
    .grid-5 {
        width: 40.5%;
    }
    .grid-6 {
        width: 49%;
    }
    .grid-7 {
        width: 57.5%;
    }
    .grid-8 {
        width: 66%;
    }
    .grid-9 {
        width: 74.5%;
    }
    .grid-10 {
        width: 83%;
    }
    .grid-11 {
        width: 91.5%;
    }
    .grid-12 {
        width: 100%;
    }

    /* Clearfix
    ================================ */

    .grid-container:after,
    .group:after {
      content: " ";
      display: table;
      clear: both;
    }
}
@media (min-width: 1200px) {
    .grid-container {
        max-width: 1100px;
    }

img.move {
    max-width: 50%;
}

}

Here's the main style sheet:

/* Page Styles
================================ */

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font: normal 1.1em/1.5 sans-serif;
  color: #3e3e3e;
  background-color: #fff;
}
html,
body,
.main-wrapper,
.col {
  height: 100%;
}

ul#front {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 1.3em;
  color: #fff;
  text-align: left;
  clear:both;
}

li#front {
  float: left;
  clear: both;
}


/* Layout Element Colors
================================ */

.main-header       { background-color: #fff; }
/*.main-nav li       { background-color: #6699CC; }*/
.primary-content   { background-color: #caebf6; }
.secondary-content { background-color: #bfe3d0; }
.main-footer       { background-color: #6699CC; }

/* Header and Footer Layout
================================ */

.main-header {
  padding: 20px;
  display: table;
  width: 100%;
  min-height: 120px;
}

.main-logo,
.main-nav,
.main-nav li {
  display: inline-block;
}
.main-logo,
.main-nav {
  display: table-cell;
  vertical-align: middle;
}
/*.main-logo {
  width: 120px;
}*/
.main-nav {
  padding-left: 50px;
}
.main-logo,
.main-nav li {
  border-radius: 5px;
}
.main-nav li {
  margin-right: 10px;
}
.main-logo a,
.main-nav a {
  color: #3e3e3e;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 10px 20px;
}

.main-nav a:hover {
  background-color: #99CC66;
  color: #fff;
  border-radius: 8px;
}


a.login {
  background-color: #6699CC;
  color: #fff;
  border-radius: 2px;
}

a.login:hover {
  background-color:#99CC66;
  color: #3e3e3e;
}

.main-footer {
  text-align: center;
  padding: 10px;
}

/* Banners
================================ */

.main-banner {
  background: #6699CC;
  text-align: center;
  padding: 25px 15px;
}

.top-banner {
  background: #6699CC;
  text-align: right;
  padding: 2px 2px;
  overflow: hidden;
}

.top-banner li {
  display: inline-block;
  margin-right: 10px;
}

.secondary-banner-green {
  background: #d9ecc5;
  margin-top: -25px;
}

.secondary-banner-orange {
  background: #ffcc99;
}

.secondary-banner-blue {
  background: #6699CC;
  min-height: 50px;
}
/* Column Layout
================================ */

.col {
  display: inline-block;
  padding: 20px;
  margin-right: -5px;
  vertical-align: top;
}
.primary-content {
  width: 60%;
}
.secondary-content {
  width: 40%;
}

/* Media Queries
================================ */

@media (max-width: 768px) {
  .main-logo,
  .main-nav,
  .main-nav li,
  .col {
       display: block;
       width: initial;
       height: initial;
       margin: initial;
  }
  .main-nav {
    padding-left: initial;
  }
  .main-nav li {
     margin-top: 15px;
  }

  p.big {
  text-align: center !important;
}



}

/* Headings and Paragraph Styles
================================ */

h1.big {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 2.1em;
  color: #fff;
  text-align: left;
}

p.big {
  text-align: left;
  color: #fff;
  font-size: 1.2em;
  font-weight: 400;
}

p.welcome {
  text-align: center;
  color: #3e3e3e;
  font-size: 1.4em;
  font-weight: 400;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 3px;
}

img[title]:hover:after {
  background-color: #6699cc;
}

img.move {
  max-width: 50%;
  float: left;
}


/* Video and Audio
================================ */

iframe {
  border: 1px solid;
  color:  #ccc;
  box-shadow: 0 20px 20px -12px rgba(62, 62, 62, 1);
  overflow: hidden;
  margin-bottom: 10px;
}



/* Buttons
================================ */

a.large-orange {
  background-color: #ff8a42;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.5em;
  color:#fff;
  border-radius: 8px;
  display: inline-block;
  padding: 20px 20px;
  text-decoration: none;
}

a.large-orange:hover {
  color: #3e3e3e;
  text-decoration: underline;
}

a.large-green {
  background-color: #99CC66;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.5em;
  color:#fff;
  border-radius: 8px;
  display: inline-block;
  padding: 20px 20px;
  text-decoration: none;
  margin-left: 20px;
}

a.large-green:hover {
  color: #3e3e3e;
  text-decoration: underline;
}

a.medium-green {
  background-color: #99CC66;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: .8em;
  color:#fff;
  border-radius: 3px;
  display: inline-block;
  padding: 10px 10px;
  text-decoration: none;
  margin-left: 10px;
  float: left;
}

a.medium-green:hover {
  color: #3e3e3e;
  text-decoration: underline;
}

a.medium-lightblue {
  background-color: #9FBFDF;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: .8em;
  color:#fff;
  border-radius: 3px;
  display: inline-block;
  padding: 10px 10px;
  text-decoration: none;
  margin-left: 5px;
  float: left;
}

a.medium-lightblue:hover {
  color: #3e3e3e;
  text-decoration: underline;
}

/* START CSS Drop Down Menu
================================ */


/*Navtest2*/
ul {
  list-style-type:none;
  margin:0;
  padding:0;
  position: absolute;
}

/*Create a horizontal list with spacing*/
li {
  display:inline-block;
  float: left;
  margin-right: 1px;
}

li a {
  display:block;
  min-width:140px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 3px;
  margin-right: 5px;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  color: #fff;
  background: #6699cc;
  text-decoration: none;
}

ul#menu {
  right: 0;
}
/*Hover state for top level links*/
li:hover a {
  background: #99CC66;
}

/*Style for dropdown links*/
li:hover ul a {
  background: #f3f3f3;
  color: #2f3036;
  height: 40px;
  border-radius: 0;
  line-height: 40px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
  background: #99cc66;
  color: #fff;
}

/*Hide dropdown links until they are needed*/
li ul {
  display: none;
}

/*Make dropdown links vertical*/
li ul li {
  display: block;
  float: none;
}

/*Prevent text wrapping*/
li ul li a {
  width: auto;
  min-width: 100px;
  padding: 0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
  display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #6699CC;
  text-align: center;
  padding: 10px 0;
  display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}
/*Responsive Styles*/

@media screen and (max-width : 768px){
  /*Make dropdown links appear inline*/
  ul {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/
  li {
    margin-bottom: 1px;
  }

  li a {
    border-radius: 0;
    margin-right: 0;
  }
  /*Make all menu links full width*/
  ul li, li a {
    width: 100%;
  }

  .main-logo {
    display: none;
  }



  h1.big {
    text-align: center;
  }

  /*Display 'show menu' link*/
  .show-menu {
    display:block;
  }

  li:hover ul a:hover {
  background: #f3f3f3;
  color: #6699CC;
  text-decoration: underline;
}
}

ul.social {
  list-style: none;
  position: relative;
}

li.social {
  float: right;
}

/* END CSS Drop Down Menu
================================ */

I would be grateful for any direction or help. I'm really stuck. Hopefully I'll smack myself on the head for overlooking something simple.

Answer 1 · 2015-04-02T23:46:12Z

April 2, 2015 11:46pm

Thank you Wayne, I actually looked around for the markup code and didn't see it. Will do better next time. :)

Answer 2 · 2015-04-02T23:56:33Z

April 2, 2015 11:56pm

Hello Erin Lowell.

I just viewed your screencast and my first guess would have to be that since your icons parent element is "grid-1". I believe what is happening is that your mobile breakpoint {your grid stylesheet} is telling all "grid-" elements to become 100% width. Since your img are within a grid-1 class it makes the div elements full width of the browser on smaller screens.

I hope this helps or at least points you in the right direction. Let me know if you have any questions.

Welcome to the Treehouse Community

Looking to learn something new?

Erin Lowell

Erin Lowell

User Agent Stylesheet overriding a div class

Erin Lowell

Erin Lowell

Wayne Priestley

Wayne Priestley

2 Answers

Erin Lowell

Erin Lowell

Chyno Deluxe

Chyno Deluxe