2
I’m having problems in the responsive layout part, I’m wanting to start working with the following sizes:
1280 x 1024
1024 x 768
768 x 1024
480 x 320
1680 x 1050
1024 x 600
However, I had already opened another topic related to this. Only a different problem happened. I managed to make my media queries with the following sizes:
1024x768, 768x1024 e 1024x600
Follow one of my favorite medias:
@media (max-width: 1024px) and (max-height: 768px){
#menu ul {
left: 26%;
}
.nomes{
margin-top: 200px;
}
.botao-circulo{
margin-top: 50px;
margin-left:-15px;
}
#header {
height: 750px;
}
video {
transform:scaley(1.8);
}
#bg-video{
position: absolute;
top: 0;
left: 0;
z-index: -50;
/* box-shadow: inset 0px 0px 200px 100px rgba(0,0,0,0.6);*/
}
.image.ico {
margin-left: 70px;
margin-top: 100px;
}
#fundo-transparente-icones{
left: -300px;
top: 70%;
transform:scale(0.6);
}
.botao-mais input[type="button"],.mais{
margin-left: 175%;
}
.texto-jogos{
margin-top: 200px;
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: 257%;
transform:scale(0.6);
}
#teamspeak-img{
transform:scale(0.7);
/*-webkit-filter:grayscale(100%);*/
z-index: 2000 !important;
}
.team.style-team{
background-repeat: no-repeat;
}
.botoes-team input[type="button"],.btn-sobre-team{
background-color: transparent;
color: #fff;
width: 100px;
height: 50px;
border:3px solid #fff;
text-align: center;
margin-left: -9%;
margin-top: 10px;
border-radius: 6px;
font-family: Gabriola;
font-size: 1.7em;
cursor: pointer;
}
.botoes-team input[type="button"]:hover,.btn-sobre-team{
background-color: #fff !important;
color: #333 !important;
transition:0.5s !important;
cursor: pointer !important;
}
.linha-team{
width: 40%;
margin-top: -10px;
}
#footer .copyright {
left: 38%;
}
}
This is just like the other two I mentioned, they work, remembering that each one is in a file . CSS separate (I tried to leave it in a single file, but the code didn’t work and only worked like this).
But then when I try to do for example the media query of 1680x1050, it works normally. But my other favorite media that I’ve already done stop working. I can’t understand, someone knows what it is?
Follow my media query regarding this size:
@media (max-width: 1680px) and (max-height: 1050px){
#menu ul {
left: 28%;
}
.nomes{
margin-top: 200px;
}
.botao-circulo{
margin-top: 190px;
margin-left:-15px;
}
#header {
height: 925px;
}
video {
transform:scaley(1.8);
}
#bg-video{
position: absolute;
top: 0;
left: 0;
z-index: -50;
/* box-shadow: inset 0px 0px 200px 100px rgba(0,0,0,0.6);*/
}
/*******************************************************************************
Icones
*******************************************************************************/
.image.ico {
margin-left: 70px;
margin-top: 100px;
}
#fundo-transparente-icones{
left: -200px;
top: 75%;
transform:scale(0.7);
}
.botao-mais input[type="button"],.mais{
margin-left: 175%;
}
.texto-jogos{
margin-top: 200px;
margin-left: 50px;
}
.botaozao input[type="button"],.jogos-botao{
margin-left: 13%;
margin-top: 30px;
}
.botaozao input[type="button"]:hover,.jogos-botao{
background-color: #fff;
color: #333;
transition:0.5s;
}
/*******************************************************************************
Parcerias
*******************************************************************************/
#fundo-transparente-parcerias{
left: -200px;
top: 225%;
transform:scale(0.7);
}
/*******************************************************************************
Team Speak
*******************************************************************************/
#teamspeak-img{
transform:scale(0.7);
/*-webkit-filter:grayscale(100%);*/
z-index: 2000 !important;
}
.team.style-team{
background-repeat: no-repeat;
}
.botoes-team input[type="button"],.btn-sobre-team{
background-color: transparent;
color: #fff;
width: 100px;
height: 50px;
border:3px solid #fff;
text-align: center;
margin-left: -9%;
margin-top: 10px;
border-radius: 6px;
font-family: Gabriola;
font-size: 1.7em;
cursor: pointer;
}
.botoes-team input[type="button"]:hover,.btn-sobre-team{
background-color: #fff !important;
color: #333 !important;
transition:0.5s !important;
cursor: pointer !important;
}
.linha-team{
width: 40%;
margin-top: -10px;
}
#footer .copyright {
left: 40%;
}
}
You have already asked this question and it has already been answered
 http://answall.com/questions/58524/design-responsive
– Danilo Oliveira
No friend I opened a topic asking how I would ultilizaria the media querie apara can manipulate the height not only the length so much and that in one of the comments I mentioned it now the problem and the one that the medias I have managed to do with the solution of the other topic do not work when I create a new media with the value of 1680x1050 an example
– Felipe Henrique
A question if it is "responsive" why separate files with fixed measures? is worth studying a framework here is a link with 20 http://webexpedition18.com/articles/20-responsive-css-frameworks-and-grids-worth-considering/
– SneepS NinjA
Working with media queries works more than a lot of work, have you thought about using a framework to control responsiveness? I have been working a lot with bootstrap and it has served me well. http:/getbootstrap.com/
– Julio Borges
and I don’t know how to use
– Felipe Henrique
It works with %, it is much easier, it can be work at the beginning but then it is quiet.
– Marcio.Rezende