CODEWITHSUNDEEP
htmlcss
Collins Orlando
Collins Orlando

Reputation: 1681

Why aren't my media queries responding?

I'm having trouble getting my media breaks to work as expected. I would like to have a similar results to Bootstrap's grid system as follows:

I'm having more trouble than I should getting the breaks to work, but I don't know for the life of me where I'm going wrong.

Here's my code. 

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Our Menu</title>
  <link href="https://fonts.googleapis.com/css?family=Sansita" rel="stylesheet">
  <style>
    /***Base Styles***/
    * {
      box-sizing: border-box;
    }
    body {
      font-family: 'Sansita', sans-serif;
      letter-spacing: 1.5px;
      background-color: beige;
    }
    .restaurant {
      margin: 0 20px 0 20px;
    }
    h1 {
      font-size: 50px;
      text-align: center;
      margin-bottom: 70px;
      margin-top: 60px;
    }
    h2 {
      font-size: 25px;
      text-align: center;
      border: 2px solid black;
      padding-bottom: 3px;
      width: 180px;
    }
    p {
      padding: 35px 10px 10px 10px;
    }
    #meal1,
    #meal2,
    #meal3 {
      background-color: khaki;
      border: 2px solid black;
      margin-bottom: 20px;
    }
    .meal1 {
      background-color: #F4C2C2;
    }
    .meal2 {
      background-color: #B22222;
    }
    .meal3 {
      background-color: grey;
    }
    @media (min-width: 992px) {
      #meal1 {
        width: 32%;
        float: left;
        margin-right: 25px;
      }
      #meal2 {
        width: 32%;
        float: left;
      }
      #meal3 {
        width: 32%;
        float: left;
        margin-left: 25px;
      }
    }
    /***Tablet Styles***/
    @media (min-width: 768) and (max-width: 991px) {
      #meal1 {
        width: 48.46%;
        float: left;
        margin-right: 10px;
        margin-bottom: 20px;
      }
      #meal2 {
        width: 48.46%;
        float: left;
        margin-left: 10px;
        margin-bottom: 20px;
      }
      #meal3 {
        width: 100%;
        float: left;
      }
    }
    /***Mobile Styles***/
    @media (max-width: 767) {
      #meal1,
      #meal2,
      #meal3 {
        width: 100%;
      }
    }
  </style>
</head>

<body>
  <div class="restaurant">
    <h1>Our Menu</h1>
    <div class="meals">
      <div id="meal1">
        <h2 class="meal1">Smoked Fish</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et tellus dictum, accumsan nunc sit amet, porttitor turpis. Phasellus orci felis, accumsan eu cursus ac, venenatis non massa. Mauris eget nisi pellentesque, luctus quam a, lacinia augue.</p>
      </div>
      <div id="meal2">
        <h2 class="meal2">Spicy Coppa</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et tellus dictum, accumsan nunc sit amet, porttitor turpis. Phasellus orci felis, accumsan eu cursus ac, venenatis non massa. Mauris eget nisi pellentesque, luctus quam a, lacinia augue.</p>
      </div>
      <div id="meal3">
        <h2 class="meal3">Fregola Salda</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et tellus dictum, accumsan nunc sit amet, porttitor turpis. Phasellus orci felis, accumsan eu cursus ac, venenatis non massa. Mauris eget nisi pellentesque, luctus quam a, lacinia augue.</p>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 0

Views: 43

Answers (1)

Quentin
Quentin

Reputation: 943108

Use a validator. Your CSS has machine detectable errors in it.

@media (min-width: 768) and (max-width: 991px) {

You have repeatedly (although not universally) specified a non-zero length without a unit. This renders the CSS invalid so it will be ignored.

Upvotes: 3

Related Questions