1
I’m making a website that has to be responsive first made desktop first I assembled all the css normally, so as soon as I finished I started to assemble the Media queries for a version tablet, I had already had problems with this part, but I opened a topic where they gave me the answer I needed, but now Medias queries of tablet which I have assembled run in those measures, however css I have assembled that does not use Media queries and when I try to make Media queries for desktop version, does not work.
Follows the codes of Media queries tablet version remembering that are the only Media queries that’s 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 also goes 4 "prints" from the screen of my site without the Media queries tablet:
With the Medias queries tablet:
NOTE: This black part of the header has a video.
Friend, a tip is: always start from mobile to desktop, the advantages are "scientifically" proven.
– Lucas Fontes Gaspareto