Problema com Media Screen (Resolução de Telas)
Boa tarde
Pessoa , estou com problemas em algumas telas , umas grandes, outras de tamanhos médios! Sei que isso se deve ao fato dos códigos se misturarem de acordo com a medida das telas!
A pergunta é, tem como colocar um código pra tudo funcionar direitinho, pq o site é responsivo, mas desfigura em alguns monitores!
Segue a baixo os codigos que estão até aqui!
@media only screen and (max-width : 1024px) and (min-width : 600px) {
.anuncios{
width:550px;
margin-left:120px;
}
}
@media only screen and (max-width : 1280px) and (min-height : 800px) {
.anuncios{
width:1000px;
margin-left:-17px;
}
}
@media only screen and (max-width : 1440px) and (min-height : 899px) {
.anuncios{
width:1000px;
margin-left:45px;
}
#logo {
width: 231px;
height: 80px;
margin-top: 15px;
margin-left:30px;
}nav {
margin-top: 35px;
margin-right:30px;
}
}
@media only screen and (max-width : 1600px) and (min-height : 900px) {
.anuncios{
width:1000px;
margin-left:100px;
}
#logo {
width: 231px;
height: 80px;
margin-top: 15px;
margin-left:87px;
}nav {
margin-top: 35px;
margin-right:87px;
}
}
@media only screen and (max-width : 1680px) and (min-height : 1050px) {
.anuncios{
width:1000px;
margin-left:130px;
}
#logo {
width: 231px;
height: 80px;
margin-top: 15px;
margin-left:120px;
}nav {
margin-top: 35px;
margin-right:120px;
}
}
@media only screen and (max-width : 1920px) and (min-height : 1080px) {
.anuncios{
width:1000px;
margin-left:220px;
}
#logo {
width: 231px;
height: 80px;
margin-top: 15px;
margin-left:210px;
}nav {
margin-top: 35px;
margin-right:210px;
}
}
@media only screen and (min-width : 1920px) and (min-height : 1200px) {
#logo {
width: 231px;
height: 80px;
margin-top: 15px;
margin-left:210px;
}
nav {
margin-top: 35px;
margin-right:210px;
}
.anuncios{
margin-left:225px;
}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
#logo {
width: 231px;
height: 80px;
margin-top: 15px;
margin-left:-10px;
}
nav {
margin-top: 35px;
margin-right:-10px;
}
.anuncios{
width:500px;
margin-left:120px;
}
.formulario select {
margin-top:20px;
margin-bottom:20px;
float:none;
width: 180px;
cursor: pointer;
box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
font-weight: bold;
color: rgb(29,119,162);
height: 40px;
white-space: nowrap;
overflow: hidden;
background-color: white;
border: 1px solid #CCCCCC;
font-size: 14px;
text-align: center;
color: rgb(29,119,162);
-o-text-overflow: ellipsis;
position: inherit;
display: block;
text-indent:20px;
}
.formulario{
margin-top:20px;
margin-bottom:2opx;
}
}Discussão (4)
Carregando comentários...