Site background is not being resized along with @MEDIA

Question

I’m starting to use @media on CSS3, I’m starting to produce now, but when I put the visualization on Chrome for any device smaller than the resolution gets a 1200px white background and the right object but if the user pulls to the side it will all turn white, help me there !

<style>
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
}

html {
 background-color: #fff;
}
body > div > div {
  margin-bottom: px;
  padding: px;
  box-sizing: border-box;
  border: 0px solid red;
}

img.logo {
  width: 230px;
  height: 55px;
  margin-top: 14px;
}

input.usuario {
  margin-top: 4px;
  border-radius: 4px;
  border: #fff;
  background-color: #fff;
  font-size: 11pt;
  margin-left: 175px;
  width: 160px;
  height: 27px;
}

input.senha {
  margin-top: 4px;
  border-radius: 4px;
  border: #fff;
  background-color: #fff;
  width: 160px;
  height: 27px;
  font-size: 11pt;
  margin-left: 6px;
  font-family: tahoma; }
input.senha::placeholder, input.usuario::placeholder { color: black;

}


input.cadastrese {
  float:right;
  width: 150px;
  height: 30px;
  position: relative;
  font-family: tahoma;
  border-radius: 4px;
  border: #a0e025;
  background-color: none;
  opacity: 0%;
  color: white;
  margin-top: 21px;
  margin-right: 8px;
  font-family: tahoma;
  font-size: 18px;
}
#cadastrarfontss > p {
  position: absolute;
  color: white;
  font-family: tahoma;
  font-size: 18px;
  margin-left: 171px;
  margin-top: 30px;
}

input.cadastrese:hover{
  background-color: #619200;
  opacity: 100%;
}
input.cadastrese:active{
  background-color: #81b71a ;
}
span.digiteuser {

  float: right;
margin-top: 5px;
  margin-right: 224px;
  color: white;
  font-family: tahoma;
  font-size: 15px;
  margin-left:
}



input.entrar {
   border-radius: 4px;
   border: white;
   background-color: #619200;
   color: white;
   font-family: tahoma;
   font-size: 11pt;
   margin-right: 35px;
   float:right;
   width: 65px;
   height: 30px;
   margin-top: 3px;
   font-family: tahoma;

}
input.entrar:hover {background-color: #73a102; }
span.linkclass {
  float: right;
  margin-right: 154px;
  margin-top: 0px;
  font-family: arial;

}

input.entrar:active{
  background-color: blue ;
}
a.link {
  color: white;
  font-size: 10pt;
  font-family: arial;
  text-decoration: none;
}
.bloco {
background-color: white;
width: 120px
}
div.layout {
  background-color: black;
  margin-left: -20px;
  margin-top: -8px;
  height: 85px;
  width: 1358px;
 float: center
}

div.layout2 {
  background-color: none;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 540px;
  height: 28px;
  width: 1335px;
 float: center
}
#maiscurtidas {
  border: solid 1.5px #a0e025;
  border-radius: 20px;
  height: 500px;

  margin-top: 10px;
}
span.maiscurtidas /*letra atras do border*/
{
color: white;
font-family: tahoma;
margin-left: 13px;
font-size: 20px;

}
img.henriqueejuliano {

  height: 70px;
  border-radius: 5px;

}
p.desenvolvedor { color: black}


@media only screen and (max-device-width: 480px) {
 #maiscurtidas { border: none;}
 input.usuario { margin-top: 80px; margin-left: -250px; width: 140px; background-color:#a0e025 ;}
 input.usuario::placeholder {color: black;}
 input.senha::placeholder {color: black;}
input.senha {margin-left: 8px; position:absolute; margin-top: 80px; width: 110px; background-color: #a0e025;}
input.entrar {position: absolute; margin-top: 80px; margin-left: 125px; background-color: black; width: 53px;}
span.digiteuser {  display: none;}
span.linkclass {position: absolute; margin-left: -100px;}
a.link{color:black;}
span.maiscurtidas {position: absolute; margin-top: 80px;}
img.logo  {position: relative; margin-left: 40px}
input.cadastrese { position: absolute; margin-left: -880px; background-color: #000; opacity: 100%; margin-top: 145px; color: white; height: 35px; width: 140px; font-size: 15pt;}
#cadastrarfontss > p {display: none;}
div.layout {width: 360px;}
div.tudo {width: 300%}
}
@media only screen and (min-device-width: 500px) and (max-device-width: 1000px) {
input.entrar {background-color: blue;}
}


</style>

<html>
<body>
  <div id="tudo">
<div id="wrapper" class="container_15">

  <div id="logoid" class="grid_3">
    <img src="logo.png" class="logo">
  </div>

  <div id="logins" class="grid_8">
    <form>
  <span class="digiteuser">Usuário:    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Senha: </span><br>

  <input type="text" name="usuario" placeholder="Digite seu usuário" required="required" class="usuario" autofocus="autofocus"/>

  <input type="password" name="senha" placeholder="Digite sua senha" required="required" class="senha"/>
  <input type="submit" value="Entrar" class="entrar">
  </form>
  <span class="linkclass"><a target="_blank"class="link" href="http://www.google.com">Esqueceu a senha?</a></span>
  </div>

  <div id="cadastrarfontss" class="grid_4"><p class="cadastrarfonts">Cadastrar-se</p></div>
  <div>
  <input type="submit" value="Cadastre-se" class="cadastrese">
</div>


  <div id="maiscurtidas" class="grid_5">
<span class="maiscurtidas"> Músicas mais curtidas</span> <br>

  </div>











    <div id="footer" class="grid_15">

    </div>
</div>
</div>
<div class="layout"></div>
<div class="layout2"></div>

</div>
</body>








</html>

Answer 1

Issac vc placed two elements (the last two div with class layout), they have fixed width in pixels, so it’s causing the scroll horizontal, change the measure in PX for % that will solve the problem, this has nothing to do directly with the @media...

But as you put it @media only screen and (max-device-width: 480px) you’ll only see the @media if the device has screen smaller than 480px, to simulate this in the browser you will have to use Deltools in responsive mode (image 2)

About @media