Media Queries not working when Browser width is Reduced?

Question

I have a weird problem. My Website is responsive when i view it in my Smartphone and even when I view it in inspect mode of google chrome but when i reduce the size of my browser, the media queries don't work. Media Queries work perfectly when i go to inspect mode of Google chrome and specify the width i need to test but when i reduce the size of the browser everything gets messed up.

*{
  margin: 0;
  padding: 0;
}

.hero{
  width: 100%;
  height: 100vh;
  background: url("../images/creative.png") no-repeat center center fixed;
  background-size: cover;
  -webkit-transition: height 1s; /* For Safari 3.1 to 6.0 */
    transition: height 1s;
}

#menu{
  width: 100%;
  height: 10vh;
  background-color: #ecc7c0;
  -webkit-transition: height 1s; /* For Safari 3.1 to 6.0 */
    transition: height 1s;
}

#ctabutton{
  padding: 10px;
    border: solid 1px skyblue; 
  background-color: #8bcbc8;
  color: #fff;
  font-family: 'Julius Sans One', sans-serif;
  font-weight: bold;
  font-size: 1.9em;
  float: right;
  width: 45%;
  height: 5vh;
  margin-top: 2.5vh;
  margin-right: 1em;
}

#hamburger{
  float: left;
  width: 15%;
  height: 5vh;
  margin-top: 2.5vh;
  text-align : center;
  color: #000;
  font-size: 2.2em;
}

#hamburgerm{
  height: 2.5vh;
  margin-top: 1.25vh;
}

#hamburgerx{
  height: 2.5vh;
  margin-top: 1.25vh;
  display: none;
}

#header{
  font-family: 'Julius Sans One', sans-serif;
  color: #fff;
    font-size: 4em;
  line-height: 3.1em;
  width: 100%;
  margin: 0 auto;
  margin-top: 2.5vh;
}

#portfolio{
  padding: 15px;
    border: solid 1px skyblue; 
  background-color: #8bcbc8;
  color: #fff;
  font-family: 'Lora', serif;
  margin: auto;
  display: block;
  font-size: 0.8em;
  margin-top: 4em;
}

#navigation{
  display: none;
  margin-top: 2em;
  width: 20em;
  margin-left: 85%;
  list-style: none;
}

#navigation a {
  text-decoration: none;
  color: #fff;
  font-family: 'Julius Sans One', sans-serif;
  font-size: 2.5em;
  line-height: 1.5em;
}
header{
  text-align: center;
}
#porthead{
  width: 100%;
  font-family: 'Julius Sans One', sans-serif;
  margin-top: 50px;
}
#portsub{
  margin-top: 25px;
  font-family: 'Julius Sans One', sans-serif;
}

.row1{
  width: 100%;
  height: 45vh;
  background-color: #000;
  margin-top: 45px;
  background: url("../images/design.jpeg") no-repeat center center fixed;
}

.row2{
  width: 100%;
  height: 45vh;
  background-color: #000;
  margin-top: 45px;
  background: url("../images/logo.jpeg") no-repeat center center fixed;
}



@media only screen and (min-width: 576px){
  #header{
    font-size: 2.5em;
  }
    #navigation a {
    font-size: 1.5em;
    }
    .row1{
    height: 55vh;
  }
  .row2{
    height: 55vh;
  }
}

@media only screen and (min-width: 768px){
  #header{
    font-size: 3em;
  }
  #ctabutton{
    font-size: 1.4em;
  }
    #navigation a {
    font-size: 1em;
    }
  #portfolio{
  margin: auto;
  display: block;
  font-size: 0.8em;
  margin-top: 2em;
    }
}

@media only screen and (min-width: 992px){
  #header{
    font-size: 2.5em;
  }
  #ctabutton{
    font-size: 1em;
    width: 35%;
  }
}

@media only screen and (min-width: 1200px){
  #header{
    font-size: 2.5em;
  }
  #ctabutton{
    font-size: 1em;
    width: 35%;
  }
}

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Mukesh Rani | Creative Web Developer</title>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Julius+Sans+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
</head>
<body>
  <div class="hero" id="hg">
      <section id= "menu">
        <section id="hamburger">
          <i id="hamburgerm" class="fas fa-bars"></i>
        <i id="hamburgerx" class="fas fa-times"></i>
        <ul id="navigation">
          <li><a href="#">Home</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact Me</a></li>
          <li><a href="#">My Story</a></li>
        </ul>    
      </section>
        <section id="cta">
          <button id="ctabutton">Ready to Work with Me</button>
      </section>
    </section>

    <section id= "header">
       <strong> Hi, I am Mukesh
      A Creative, Passionate and Experienced
      Web Designer and Developer </strong>
      <button id="portfolio">Work Collection</button>
    </section>

  </div>
  <div class="portfolio">
      <header>
        <h1 id="porthead">My Work Collection</h1>
      <p id="portsub">In the past several years, I have worked with many MNC's and Startups which makes Experience my Golden Factor
    </header>
        <div class="row1"> <button id="cta1">Ready to Work with Me</button> </div>
    <div class="row2">  <button id="cta2">Ready to Work with Me</button>    </div>
    <div class="row2">  <button id="cta3">Ready to Work with Me</button>   </div>
    <div class="row2">  <button id="cta4">Ready to Work with Me</button>  </div>
  </div>
  <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

score 0 · Answer 1 · answered Jul 07 '18 at 10:13

0

I think your problem is in @media only screen and (min-width:....) causing the query didn't work after it get less. Try to change into (max-width: 576px) etc and look how it goes

answered Jul 07 '18 at 10:13

Rafv

261
2
9

This is incorrect. He shouldn't mix. If he's using mobile-first, he should stick to that, and create queries for the smallest possible screen first. – CodeSpent Jul 07 '18 at 10:20
Yep, you right. He need some breakpoints, I just thought he asking the queries which be the problem – Rafv Jul 07 '18 at 10:40

score 0 · Answer 2 · answered Jul 07 '18 at 10:19

Your media queries are breakpoints that are triggered when screen width/height reaches the threshold. Between these values can not always be guaranteed. If you are noticing that elements are not sized appropriately between 2 media queries, simply create another media query at the value in which the element breaks.

You are using the mobile first approach so its important to know that you're styling from small to big, and trying to write your rules backwards can make it a bit tough. So start at the smallest screen you need to design for, then work your way up.

Here is a nice megathread as well on why you use @media only screen.

You're on the right track, you just may need to create more breakpoints to see uniform results on all screens.

Media Queries not working when Browser width is Reduced?

2 Answers2