title: Media queries messes with website css
body: <p>On my website, I added media queries to make it responsive to smart phones/tablets and it works perfectly when I am testing it. All of a sudden when I come back the next day, all my CSS on the website is messed up and the only way to fix it is to remove the media queries on the website. I believe the problem is when i specify the width and height of the website. Here's the media query code</p>
  
  <p>Media Query Code:</p>
  
  <pre><code>@media (min-height: 1366px) and (min-width: 1024px) {
  
      #img-div{
  
      width: 15%;
      height: 20%;
      margin: 0 auto;
      overflow: hidden;
  
  }
  
      #container{
  
      width: 100vw;
      height: 100%;
      margin: 0 auto;
      position: relative;
      top: 20%;
  
  
  }
  
      #login-div{
      width: 39vw;
      height: 100%;
      margin: 0 auto;
      overflow: hidden;
  }
  
      .input-box{
      width: 100%;
       height: 60px;
      background-color: rgba(255, 255, 255, 0.25);
    border:  none;
    padding: 5px 20px;
      border-style: none;
      margin: 0 auto;
   font-size: 16px;
    box-sizing:border-box;
  
  }
  
      #welcome-text{
      text-align: center;
      font-size: 25px;
  }
  }
  
  @media (min-height: 1024px) and (min-width: 768px){
  
  
      #container{
  
       width: 100%;
      height: 100%;
      margin: 0 auto;
      position: relative;
      top: 0%;
  
  
  }
  
       #login-div{
      width: 39vw;
      height: 100%;
      margin: 0 auto;
      overflow: hidden;
           position: relative;
           top: 20%;
  }
  
       #welcome-text{
      text-align: center;
      font-size: 20px;
           position: relative;
           top: 20%;
  }
  
       #img-div{
  
      width: 15%;
      height: 10%;
      margin: 0 auto;
      overflow: hidden;
          position: relative;
           top: 20%;
  }
  }
  
  @media (min-height: 812px) and (min-width: 375px){
  
       #img-div{
  
      width: 15%;
      height: 10%;
      margin: 0 auto;
      overflow: hidden;
          position: relative;
           top: 12%;
  }
  
      #welcome-text{
      text-align: center;
      font-size: 16px;
       position: relative;
       top: 12%;
  }
      #login-div{
  
      width: 78vw;
      height: 100%;
      margin: 0 auto;
      position: relative;
      top: 12%;
  }
  
      #forgotPass{
  
      position: relative;
      left: 15%;
  }
  
      #remember{
  
      margin: 0;
      padding-left: 12%;
      padding-top: 1%;
  }
  
  }
  
  @media (min-height: 375px) and (min-width: 812px){
  
       #img-div{
  
      width: 6%;
      height: 10%;
      margin: 0 auto;
      overflow: hidden;
      position: relative;
       top: 5%;
      background-color: ;
  }
  
       #welcome-text{
      text-align: center;
      font-size: 18px;
       position: relative;
       top: 1%;
  }
  
      #login-div{
  
      width: 39vw;
      height: 100%;
      margin: 0 auto;
      position: relative;
      top: 0%;
  }
      .bottom-text{
  
      float: left;
      position: relative;
      bottom: 5%;
  }
  
  }
  </code></pre>
  
  <p>I use min-height/width because when you flip the screen horizontally, some queries have the same width so i have to specify. So my problem is that when I edit the media queries for the phones/tablets it works now and later when i come back, the website itself(not on the phones) looks all messed up. If someone can show me the best way to make your website responsive on the phones would be great. Here is my website code</p>
  
  <p>Html and some php</p>
  
  <pre><code>&lt;?php
  
  if($_SERVER['REQUEST_METHOD'] =="POST"){
  
      $error = "";
      $fullname = addslashes(trim($_POST['fullname-text']));
      $email = addslashes(trim($_POST['email-text']));
      $password = addslashes(trim($_POST['password-text']));
      $storePassword = password_hash($password, PASSWORD_BCRYPT, array('cost' =&gt; 10));
  
      if(!empty($fullname) &amp;&amp; !empty($email) &amp;&amp; !empty($password)){
  
          //Check if email is valid
          if(filter_var($email, FILTER_VALIDATE_EMAIL) == false){
  
              $error .= "Email not VALID";
          }
  
          //Check if passwrod is greater 6
          if(strlen($password) &lt; 6){
  
              die ("Password has to be GREATER than 6 characters!");
  
          }
  
  
      }
  }
  
  ?&gt;
  
  
  &lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Rotary Speaker Login Page&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="rotarycss.css"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
        &lt;div id="tint"&gt;
  
            &lt;div id="container"&gt;
  
                &lt;div id="img-div"&gt;
                &lt;img src="yellow.png" id="logo"&gt;
                &lt;/div&gt;
  
                &lt;p id="welcome-text"&gt;Welcome to the Guest Speaker Forum&lt;/p&gt;
  
                &lt;div id="login-div"&gt;
  
  
                &lt;form action="signup.php" method="post"&gt;
  
                      &lt;input type="text" name="fullname-text" placeholder="Fullname" class="input-box" class="test"&gt;
  
                    &lt;br&gt;&lt;br/&gt;
                      &lt;input type="text" name="email-text" placeholder="Email" class="input-box"&gt;
  
                    &lt;br&gt;&lt;br/&gt;
                  &lt;input type="password" name="password-text" placeholder="Password" class="input-box"&gt;
  
                    &lt;br&gt;&lt;br/&gt;
  
  
              &lt;button class="submit" name="submit"&gt;SIGN UP&lt;/button&gt;  
            &lt;br&gt;&lt;br/&gt;
  
          &lt;a href="login.php" class="href-links"&gt;&lt;p class="bottom-text"&gt;Already have an account?&lt;/p&gt;&lt;/a&gt;
  
          &lt;br&gt;&lt;br/&gt;
  
          &lt;a href="http://www.google.com" class="href-links"&gt;&lt;p id="goBack" class="bottom-text"&gt;&amp;larr; Back to Website&lt;/p&gt;&lt;/a&gt;
  
  
            &lt;/form&gt;
  
  
  
  
                &lt;/div&gt;
  
  
  
            &lt;/div&gt;
  
  
  
          &lt;/div&gt;
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html {
      background-image: url(speaker.png);
      background-attachment: fixed;
      background-size: 100% 100%;
  }
  html, body {
   min-height: 100%;
   min-width: 100%;
  color: hsla(0,0%,100%,.8);
  font-family: 'Montserrat', sans-serif;
  overflow: hidden;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
  margin: 0;
      padding: 0;
  }
  
  #tint{
  
  z-index: 1;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.5);   
  
  }
  
  #container{
  
      width: 100%;
      height: 100%;
      margin: 0 auto;
      position: relative;
      top: 0%;
     background-color: ;
  
  }
  
  
  #img-div{
  
      width: 8%;
      height: 15%;
      margin: 0 auto;
      overflow: hidden;
      position: relative;
      top: 12%;
  }
  
  #logo{
  
      width: 100%;
      height: 100%;
  
  }
  
  #welcome-text{
      text-align: center;
      font-size: 23px;
      position: relative;
      top: 12%;
  }
  
  #login-div{
  
      width: 29vw;
      height: 100%;
      margin: 0 auto;
      position: relative;
      top: 12%;
      background-color: ;
  }
  
  
  .input-box{
      width: 100%;
       height: 40px;
      background-color: rgba(255, 255, 255, 0.25);
    border:  none;
    padding: 5px 20px;
      border-style: none;
      margin: 0 auto;
   font-size: 20px;
    box-sizing:border-box;
      color:white;
  }
  
  input::-webkit-input-placeholder {
  color: white !important;
  
  }
  
  .checkBox{
  
      width: 25px;
      position: relative;
      float:left;
  
  }
  
  .checkBox label{
  
      cursor: pointer;
      position: absolute;
      width: 25px;
      height: 25px;
      top:0px;
      left: 0px;
      background: #eee;
      border: 1px solid #ddd;
  
  }
  
  .checkBox label:after{
  
      opacity: 0.2;
      content: '';
      position: absolute;
      width: 9px;
      height: 5px;
      background: transparent;
      top: 6px;
      left: 7px;
      border: 3px solid #333;
      border-top: none;
      border-right: none;
      transform: rotate(-45deg);
  }
  
  .checkBox label:hover:after{
  
      opacity: 0.5;
  }
  
  .checkBox input[type=checkbox]:checked + label:after{
  
      opacity: 1;
  }
  
  #remember{
  
      margin: 0;
      padding-left: 7%;
      padding-top: 1%;
  }
  
  .submit{
  
      background-color: orange;
    border: none;
    padding: 10px 27px;
    width: 100%;
      height: 50px;
      color: hsla(0,0%,100%,.8);
      font-size: 20px;
  }
  
  .bottom-text{
  
      float: left;
  
  }
  
  .bottom-text:hover{
  
      text-decoration: underline;
  }
  #forgotPass{
  
      position: relative;
      left: 55%;
  }
  
  #goBack{
  
      clear: both;
  }
  
  .href-links{
  
      color: hsla(0,0%,100%,.8);
  }
  </code></pre>
  
  <p>How it looks when media query is added</p>