CODEWITHSUNDEEP
htmlcssmedia-queries
Plamenna Pavlova
Plamenna Pavlova

Reputation: 13

Why does my media query revert to base styling at breakpoint width:991 px if I have specified @media(min-width: 768) and (max-width: 991px) {...}?

I would be very grateful for some assistance with the following.

I have defined the media queries as follows:

/*base styles -- mobile first/ for mobile

@media (min-width:768px ) and (max-width:991px) {...} for tablet

@media (min-width: 992px) {...} for desktop

At the breakpoint of width: 991px the rendering reverts to the base style for just that value and at 992px displays the desktop version correctly.

Why is this happening and how can I fix the bug at 991px width?

/***********base styles - mobile first****************/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Comic Sans MS', Helvetica, Arial, sans-serif;
  font-weight: bold;
  position: relative;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}

.section {
  background-color: #999999;
  border: 3px solid;
  margin-right: 50px;
  margin-left: 50px;
  margin-bottom: 20px;
}

.title {
  width: 120px;
  text-align: center;
  border-left: 3px solid;
  border-bottom: 3px solid;
  padding: 5px;
  float: right;
}

.description {
  padding: 5px;
  padding-top: 15px;
  margin: 10px;
}

#title1 {
  background-color: #D59898;
}

#title2 {
  background-color: #C14543;
}

#title3 {
  background-color: #E5D198;
}


/*******medium device only************/

@media(min-width: 768px) and (max-width: 991px) {
  h1 {
    width: 90%;
    left: 35px;
  }
  .section {
    margin: 0px;
    margin-bottom: 5%;
    width: 40%;
    float: left;
    left: 35px;
  }
  #section3 {
    clear: both;
    width: 90%;
  }
  #section1 {
    margin-right: 10%;
  }
}


/*******large device only************/

@media(min-width: 992px) {
  .section {
    margin: 0px;
    margin-right: 2%;
    width: 30%;
    float: left;
  }
  #section1 {
    margin-left: 2%;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=, initial-scale=1.0">
  <title>Module 2 Solution</title>
  <link rel="stylesheet" href="style.css">
  <style>

  </style>
</head>

<body>

  <h1>Our Menu</h1>
  <div>
    <section id="section1" class="section">
      <div id="title1" class="title">Chicken</div>
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque est velit, fermentum in maximus ut, venenatis a massa. Nunc eu quam purus. Quisque semper nulla in urna bibendum efficitur. Sed consequat mi eget dolor accumsan, tempus sagittis
        leo accumsan. Donec id ex nibh. Etiam luctus mi eget mauris semper pretium. Mauris ornare leo ut elit efficitur, nec tempus justo fringilla. Mauris lorem justo, accumsan eu malesuada sed, lacinia at libero. Aenean commodo nec velit vitae molestie.
        Fusce vel leo augue. </div>
    </section>
    <section id="section2" class="section">
      <div id="title2" class="title">Beef</div>
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque est velit, fermentum in maximus ut, venenatis a massa. Nunc eu quam purus. Quisque semper nulla in urna bibendum efficitur. Sed consequat mi eget dolor accumsan, tempus sagittis
        leo accumsan. Donec id ex nibh. Etiam luctus mi eget mauris semper pretium. Mauris ornare leo ut elit efficitur, nec tempus justo fringilla. Mauris lorem justo, accumsan eu malesuada sed, lacinia at libero. Aenean commodo nec velit vitae molestie.
        Fusce vel leo augue.</div>
    </section>
    <section id="section3" class="section">
      <div id="title3" class="title">Sushi</div>
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque est velit, fermentum in maximus ut, venenatis a massa. Nunc eu quam purus. Quisque semper nulla in urna bibendum efficitur. Sed consequat mi eget dolor accumsan, tempus sagittis
        leo accumsan. Donec id ex nibh. Etiam luctus mi eget mauris semper pretium. Mauris ornare leo ut elit efficitur, nec tempus justo fringilla. Mauris lorem justo, accumsan eu malesuada sed, lacinia at libero. Aenean commodo nec velit vitae molestie.
        Fusce vel leo augue.</div>
    </section>
  </div>
</body>

</html>

Upvotes: 1

Views: 592

Answers (2)

A Haworth
A Haworth

Reputation: 36636

I suspect it is fine at exaclty 991px as max-width is inclusive.

But what happens between 991px and 992px? You haven't told it how to style in that range so it goes back to the basic settings.

As max-width and min-width are inclusive you could have:

@media (min-width:768px ) and (max-width:992px) {...} for tablet

@media (min-width: 992px) {...} for desktop

OR

@media (min-width:768px ) and (max-width:991px) {...} for tablet

@media (min-width: 991px) {...} for desktop

depending on exactly where you believe a desktop width starts.

body {
  width: 100vw;
  height: 100vh;
  background: yellow;
}

/*for tablet*/
@media (min-width:768px) and (max-width:992px) {
  body {
    background: pink;
  }
}

/*for desktop*/
@media (min-width: 992px) {
  body {
    background: cyan;
  }
}

Upvotes: 0

Vladislav Akhmetvaliyev
Vladislav Akhmetvaliyev

Reputation: 755

Your browser can fail on calculating max value in case there is some scaling on the page (could be related to high DPI screen usage). There is a well-known workaround used in Bootstrap for example

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

Why subtract .02px? Browsers don’t currently support range context queries, so we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.

You can read about it here

Upvotes: 2

Related Questions