Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

Reebelo

Problema na formatação do site

Mensagens Recomendadas

Reebelo

Boa tarde, 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;
}
}

Obrigado desde já!

Editado por Reebelo

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Reebelo

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;
}
}

 

  • Voto 1

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.