CODEWITHSUNDEEP
htmlcss
Aureus
Aureus

Reputation: 23

Basic CSS not being applied to div

I am trying to make my own website, and it was going great until I tried to make it responsive (with @media). Now, my .top class is not applying to my div (look at <div class="top"><h1>Awesurio Home Page</h1></div> specifically). I have supplied my full HTML and CSS that applies to the actual webpage. The nav CSS was working before, so I have not posted it. If you want it, I can.

  h1 {
  color: white;
  text-align: center;
  font-size: 40pt;
  font-family: Arial;
  font-weight: bold;
}

p {
  color: #222222;
  font-family: Arial;
  font-size: 16pt;
  img {
    width: 100%;
    height: auto;
  }
  .row:after {
    content: "";
    clear: both;
    display: table;
  }
  [class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
  }
  @media only screen and (min-width: 600px) {
    .col-s-1 {
      width: 8.33%;
    }
    .col-s-2 {
      width: 16.66%;
    }
    .col-s-3 {
      width: 25%;
    }
    .col-s-4 {
      width: 33.33%;
    }
    .col-s-5 {
      width: 41.66%;
    }
    .col-s-6 {
      width: 50%;
    }
    .col-s-7 {
      width: 58.33%;
    }
    .col-s-8 {
      width: 66.66%;
    }
    .col-s-9 {
      width: 75%;
    }
    .col-s-10 {
      width: 83.33%;
    }
    .col-s-11 {
      width: 91.66%;
    }
    .col-s-12 {
      width: 100%;
    }
  }
  @media only screen and (min-width: 768px) {
    .col-1 {
      width: 8.33%;
    }
    .col-2 {
      width: 16.66%;
    }
    .col-3 {
      width: 25%;
    }
    .col-4 {
      width: 33.33%;
    }
    .col-5 {
      width: 41.66%;
    }
    .col-6 {
      width: 50%;
    }
    .col-7 {
      width: 58.33%;
    }
    .col-8 {
      width: 66.66%;
    }
    .col-9 {
      width: 75%;
    }
    .col-10 {
      width: 83.33%;
    }
    .col-11 {
      width: 91.66%;
    }
    .col-12 {
      width: 100%;
    }
  }
  .top {
    background-color: #222222;
    color: #222;
    padding: 10px;
  }
  .menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color: #33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }
  .menu li:hover {
    background-color: #0099cc;
  }
  .aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }
  .footer {
    background-color: #222;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
  }
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width" , initial-scale="1.0">
  <meta charset="UTF-8">
  <title>Awesurio</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/bodystyle.css">
</head>

<body>
  <div class="header">
    <div id="container">
      <div id="burger">
        <div class="bun top"></div>
        <div class="filling"></div>
        <div class="bun bottom"></div>
      </div>
    </div>
  </div>
  <nav>
    <ul>
      <li>
        <a href="index.html">Home</a>
      </li>
      <li class="green">
        <a href="projects.html">Projects</a>
      </li>
      <li class="red">
        <a href="test1.html">test</a>
      </li>
      <li class="yellow">
        <a href="test2.html">test</a>
      </li>
      <li class="purple">
        <a href="test3.html">test</a>
      </li>
    </ul>
  </nav>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="js/index.js"></script>
  <div class="top">
    <h1>Awesurio Home Page</h1>
  </div>
  <div class="clearfix">
    <div class="col-s-12">
      <p>Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff .Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.S tuff.Stuff.Stuff.Stuff.Stuff.Stuff.</p>
    </div>
  </div>
</body>

</html>

Both of these worked before I added the @media, so maybe that is the culprit? I'm really just starting out in HTML so I could have easily made a rookie mistake.

Upvotes: 2

Views: 390

Answers (1)

Alex
Alex

Reputation: 2780

You have a typo in your CSS, add in the missing closing bracket for your p declaration:

p {
    color: #222222;
    font-family: Arial;
    font-size: 16pt;
 } // <- This was missing

Fiddle:

https://jsfiddle.net/cs2hvmnz/1/

Upvotes: 2

Related Questions