2

Olá, queria saber se alguém aqui sabe como eu faço pra deixar uma lista responsiva, vou explicar, veja a imagem:

inserir a descrição da imagem aqui

É o seguinte, o que está na imagem irá aparecer pra todos os monitores, independente de sua resolução, como eu faria em CSS pra que essa "lista de séries" aumente horizontalmente?

Vou colocar o código abaixo:

.cont_marg
{
    max-width:770px;
    margin:auto;
}

Então eu queria algo como:

Se a tela for maior que 770+154, então o max-width seja setado para 924... Se o monitor for maior que 924+154, então o max-width seja setado para 1078 E por aí vai...

Eu tentei esse código aqui no CSS, mas não funcionou como eu esperava

@media only screen and (min-width: 154px) and (max-width: 307px) {
    .cont_marg
    {
        max-width:154px;
        margin:auto;
    }
}
@media only screen and (min-width: 308px) and (max-width: 461px) {
    .cont_marg
    {
        max-width:308px;
        margin:auto;
    }
}
@media only screen and (min-width: 462px) and (max-width: 615px) {
    .cont_marg
    {
        max-width:462px;
        margin:auto;
    }
}
@media only screen and (min-width: 616px) and (max-width: 769px) {
    .cont_marg
    {
        max-width:616px;
        margin:auto;
    }
}
@media only screen and (min-width: 770px) and (max-width: 923px) {
    .cont_marg
    {
        max-width:770px;
        margin:auto;
    }
}
@media only screen and (min-width: 924px) and (max-width: 1077px) {
    .cont_marg
    {
        max-width:924px;
        margin:auto;
    }
}
@media only screen and (min-width: 1078px) {
    .cont_marg
    {
        max-width:1078px;
        margin:auto;
    }
}
6
  • 1
    Creio que usando @media only screen and (min-width:770px){... por exemplo. Commented 16/03/2016 às 18:54
  • Editei o tópico, vê lá =/ Commented 16/03/2016 às 20:04
  • não ficou como esperava, mas ficou como? qual foi o erro? Commented 16/03/2016 às 20:11
  • Era desse jeito mesmo, eu tinha errado no código, funcionou! obrigado! Vou editar o tópico com o código corrigido! Valeu! Commented 16/03/2016 às 20:14
  • 1
    Giovana, não edite a sua pergunta. Se resolveu o problema, mantenha o código da pergunta como está e poste uma resposta com o código correto, assim a sua pergunta não perde o contexto e pode ajudar outras pessoas no futuro. Commented 16/03/2016 às 23:51

1 Resposta 1

1

desenvolver coisas assim é muito legal mesmo, porém nem sempre agente precisa ficar redesenhando uma roda, baixe o bootstrap importe os arquivos css dele, e vá no bootsnip pegue uma lista e adeque a sua necessidade,a comunidade já esta bem desenvolvida na questão de Framework responsivos, segue os links

Bootsnip http://bootsnipp.com/

Bootstrap http://getbootstrap.com/

Boa sorte

0

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 .