I'm making a website that has to be responsive first I made desktop first I mounted the whole css normally, so as soon as I finished I started to mount the Media queries for a < in> tablet , I had already had a problem with that part, but I opened a topic where they gave me the answer I needed, but now Means queries that mount worked on those measures, however the css I mounted does not use Media queries and when I try to make the Media queries for desktop version, it does not work.
Media queries tags of the tablet version remembering that they are the only Media queries in my code:
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/responsivo/tablet.css" media="screen"/>
The code:
/*******************************************************************************
533x853
*****************************************************************************/
@media (min-width:500px) AND (max-width:533px),(min-height:799) AND (max-height:853px) {
#menu ul {
left: 15px;
}
#menu ul li a{
font-size: 1.2em;
margin: 4px;
}
.setas{
right: 10%;
}
#seta-esquerda{
transform: scale(1);
right: 85%;
}
#seta-direita{
transform: scale(1);
left: 40%;
}
video {
transform:scaley(3.9);
}
.nomes{
font-size: 4.3em;
margin-top: 100px;
}
.texto1 {
font-size: 1em;
}
.image.ico {
width: 50%;
margin-left: 175px;
margin-top: 100px;
}
.botao-mais input[type="button"],.mais{
margin-left: 80%;
}
#fundo-transparente-icones{
position: absolute;
left: -180px;
top: 80%;
transform:scale(0.8);
z-index: -200;
}
.main .jogos-nomes{
margin-top: 50px;
font-size: 3.5em;
}
.texto-jogos{
text-align: left;
font-family: Gabriola;
font-size: 1em;
margin-top: 120px;
margin-left: 40px;
}
.main {
padding: 6em 0 4em 0;
}
.main.style2 {
background-color: #333;
color:#fff;
background-size: 100% 100%;
height: 600px;
opacity: 0.95;
border-bottom: 15px solid #f80;
border-top: 15px solid #f80;
}
.main.style2{
background-repeat: no-repeat;
}
.botaozao input[type="button"],.jogos-botao{
background-color: transparent;
color: #fff;
width: 250px;
height: 50px;
border:3px solid #fff;
text-align: center;
margin-left: 20%;
margin-top: 30px;
border-radius: 6px;
font-family: Gabriola;
font-size: 1.7em;
}
.botaozao input[type="button"]:hover,.jogos-botao{
background-color: #fff;
color: #333;
transition:0.5s;
}
}
/*******************************************************************************
600x800
********************************************************************************/
@media (min-width:534px) AND (max-width:600px), (max-height:800px){
#menu ul {
left: 12%;
}
#menu ul li a{
font-size: 1.2em;
margin: 4px;
}
.setas{
right: 9%;
}
#seta-direita{
transform: scale(1);
left: 85%;
}
#seta-esquerda{
transform: scale(1);
right: 85%;
}
.container > p{
transform: scale(0.9);
}
.image.ico {
margin-left: 35%;
margin-top: 100px;
}
#fundo-transparente-icones{
left: -300px;
top: 90%;
transform:scale(0.6);
}
.botao-mais input[type="button"],.mais{
margin-left: 90%;
}
.texto-jogos{
margin-top: 20%;
margin-left: 50px;
}
.botaozao input[type="button"],.jogos-botao{
margin-left: 15%;
margin-top: 30px;
}
.botaozao input[type="button"]:hover,.jogos-botao{
background-color: #fff;
color: #333;
transition:0.5s;
}
#fundo-transparente-parcerias{
left: -300px;
top: 330%;
transform:scale(0.6);
}
.linha-team{
width: 40%;
margin-top: -10px;
}
}
/*******************************************************************************
600x1024
*******************************************************************************/
@media (max-width:600px),(min-height:801px) AND (max-height:1024px){
#menu ul {
left: 12%;
}
#menu ul li a{
font-size: 1.2em;
margin: 4px;
}
.setas{
right: 9%;
}
#seta-direita{
transform: scale(1);
left: 45%;
}
#seta-esquerda{
transform: scale(1);
right: 50%;
}
.botao-circulo{
margin-top: 100px;
margin-left:-15px;
}
.nomes{
margin-top: 20%;
}
video {
transform:scaley(4.1);
}
.container > p{
transform: scale(0.9);
}
.image.ico {
margin-left: 36%;
margin-top: 100px;
width: 40%;
}
#fundo-transparente-icones{
left: -300px;
top: 90%;
transform:scale(0.6);
}
.botao-mais input[type="button"],.mais{
margin-left: 93%;
}
.jogos-nomes{
font-size: 4em !important;
}
.texto-jogos{
margin-top: 30%;
margin-left: 50px;
}
.botaozao input[type="button"],.jogos-botao{
margin-left: 15%;
margin-top: 30px;
}
.botaozao input[type="button"]:hover,.jogos-botao{
background-color: #fff;
color: #333;
transition:0.5s;
}
#fundo-transparente-parcerias{
left: -300px;
top: 330%;
transform:scale(0.6);
}
.linha-team{
width: 40%;
margin-top: -10px;
}
}
/*******************************************************************************
603x966
*******************************************************************************/
@media (min-width:601px) AND (max-width:603px){
#menu ul {
left: 12%;
}
#menu ul li a{
font-size: 1.2em;
margin: 4px;
}
}
/*******************************************************************************
768x1024
*******************************************************************************/
@media (min-width:604px) AND (max-width:768px){
#menu ul {
left: 20%;
}
.botao-mais input[type="button"],.mais{
margin-left: 135%;
}
.jogos-nomes{
margin-top: 5% !important;
}
.texto-jogos{
margin-top: 15%;
margin-left: 50px;
}
}
/*******************************************************************************
800x1280
*******************************************************************************/
@media (min-width:769px) AND (max-width:800px),(min-height:1025px) AND (max-height:1280px){
#menu ul {
left: 20%;
}
#menu ul li a{
font-size: 1.2em;
margin: 4px;
}
.setas{
right: 10%;
}
#seta-esquerda{
transform: scale(0.9);
right: 85%;
}
#seta-direita{
transform: scale(0.9);
left: 40%;
}
.botao-circulo{
margin-top: 150px;
margin-left:-15px;
}
video {
transform:scaley(3.9);
}
#bg-video{
height: 100%;
}
.nomes{
font-size: 4.5em;
margin-top: 450px;
}
.texto1 {
font-size: 1em;
}
.image.ico {
width: 40%;
margin-left: 38%;
margin-top: 100px;
}
.image.ico img {
width: 60%;
}
.botao-mais input[type="button"],.mais{
margin-left: 150%;
}
#fundo-transparente-icones{
position: absolute;
left: -180px;
top: 80%;
transform:scale(0.8);
z-index: -200;
}
.jogos-nomes{
margin-top: 5% !important;
}
.texto-jogos{
margin-top: 15%;
margin-left: 50px;
}
}
Here you will also see 4 "prints" of my site's screen without the Media queries of tablet:
With the Stockings queries tablet:
NOTE: This black part of the header has a video.