0

Bom dia, estou com um problema com o css do meu site ele apenas funciona a partir do Laptop até ao 4K, alguém me sabe dizer o porquê?

 /*Mobile S*/
@media only screen and (max-width: 320px) {
.content{
margin-left: 35%;
margin-top: 250%;
margin-right: 35%;
background: -webkit-linear-gradient(left, #666666, #333333);
padding-top: 5%;
border-radius:15px;
    height: 320;
}
}

/*Mobile M*/
@media only screen and (min-width:321px) and (max-width: 376px) {
.content{
margin-left: 35%;
margin-top: 128%;
margin-right: 35%;
background: -webkit-linear-gradient(left, #666666, #333333);
padding-top: 5%;
border-radius:15px;
    height: 320;
}
}

/*Mobile L*/
@media only screen and (min-width:377px) and (max-width: 426px) {
.content{
margin-left: 35%;
margin-top: 111%;
margin-right: 35%;
background: -webkit-linear-gradient(left, #666666, #333333);
padding-top: 5%;
border-radius:15px;
    height: 320;
}
}

/*Tablet*/
@media only screen and (min-width:427px) and (max-width: 768px) {
.content{
margin-left: 35%;
margin-top: 53%;
margin-right: 35%;
background: -webkit-linear-gradient(left, #666666, #333333);
padding-top: 5%;
border-radius:15px;
    height: 320;
}
}

/*Laptop*/
@media only screen and (min-width:769px) and (max-width: 1025px) {
.content{
margin-left: 35%;
margin-top: 36%;
margin-right: 35%;
background: -webkit-linear-gradient(left, #666666, #333333);
padding-top: 5%;
border-radius:15px;
    height: 320;
}
}

/* Laptop L*/
@media only screen and (min-width:1025px) and (max-width: 2559px) {
.content{
margin-left: 35%;
margin-top: 25%;
margin-right: 35%;
background: -webkit-linear-gradient(left, #666666, #333333);
padding-top: 5%;
border-radius:15px;
    height: 320;
}
}

/* 4K*/
@media only screen and (min-width:2560px) {
.content{
margin-left: 35%;
margin-top: 13%;
margin-right: 35%;
background: -webkit-linear-gradient(left, #666666, #333333);
padding-top: 5%;
border-radius:15px;
    height: 320;
}
}

2
  • Jovem suas regras de media queries parecem estar na ordem errada... tente começar com as regras de 4k e deixar por último as regras de mobile etc... Faça o teste e veja se da certo, se funcionar me fala que te dou uma resposta com mais detalhes
    – hugocsl
    Commented 9/11/2018 às 12:37
  • Antes de postar já tinha feito isso e não resultou. Commented 9/11/2018 às 12:52

1 Resposta 1

0

Já consegui resolver!! Vou postar o código para quem precisar. No meu caso bastou colocar device na query.

/* 4K*/
@media only screen and (min-device-width:2560px) {
	.content{
	margin-left: 35%;
    margin-top: 13%;
    margin-right: 35%;
    background: -webkit-linear-gradient(left, #666666, #333333);
    padding-top: 5%;
	border-radius:15px;
	    height: 320;
}
}

/* Laptop L*/
@media only screen and (min-device-width:1025px) and (max-device-width: 2559px) {
	.content{
	margin-left: 35%;
    margin-top: 25%;
    margin-right: 35%;
    background: -webkit-linear-gradient(left, #666666, #333333);
    padding-top: 5%;
	border-radius:15px;
	    height: 320;
}
}

/*Laptop*/
@media only screen and (max-device-width: 1025px) and (min-device-width: 769px){
	.content{
	margin-left: 35%;
    margin-top: 36%;
    margin-right: 35%;
    background: -webkit-linear-gradient(left, #666666, #333333);
    padding-top: 5%;
	border-radius:15px;
	    height: 320;
}
}

/*Tablet*/
@media only screen and (min-device-width:427px) and (max-device-width: 768px) {
	.content{
	margin-left: 35%;
    margin-top: 53%;
    margin-right: 35%;
    background: -webkit-linear-gradient(left, #666666, #333333);
    padding-top: 5%;
	border-radius:15px;
	    height: 320;
}
}

/*Mobile L*/
@media only screen and (min-device-width:377px) and (max-device-width: 426px) {
	.content{
	margin-left: 35%;
    margin-top: 111%;
    margin-right: 35%;
    background: -webkit-linear-gradient(left, #666666, #333333);
    padding-top: 5%;
	border-radius:15px;
	    height: 320;
}
}

/*Mobile M*/
@media only screen and (min-device-width:321px) and (max-device-width: 376px) {
	.content{
	margin-left: 35%;
    margin-top: 128%;
    margin-right: 35%;
    background: -webkit-linear-gradient(left, #666666, #333333);
    padding-top: 5%;
	border-radius:15px;
	    height: 320;
}
}

/*Mobile S*/
@media only screen and (max-device-width: 320px) {
	.content{
	margin-left: 35%;
    margin-top: 90%;
    margin-right: 35%;
    background: -webkit-linear-gradient(left, #666666, #333333);
    padding-top: 5%;
	border-radius:15px;
	    height: 320;
}
}

1
  • 1
    Cara por der resolvido, mas cuidado com isso, pq quando vc fala device é a largura da tela do dispositivo, não a largura da janela... faça testes para garantir que nada esta buggando... pt.stackoverflow.com/questions/140997/…
    – hugocsl
    Commented 9/11/2018 às 16:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .