Entrar Ainda não tem acesso?
4
respostas

Dificuldade no layout da pagina Contato para celular

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS

por Thuany Pereira de Macedo vermelho
| 50.8k xp | 3 posts

#Coloquei todos as classes no style.css, porem não consegui formatar para a pagina Contato.!#Insira aqui a descrição dessa imagem para ajudar na acessibilidade 

@media screen and (max-width: 480px) {
.caixa, .principal, .conteudo-diferencial, .conteudo-beneficios, .mapa-conteudo, .video, .produtos, 
.produto-preco, .produto-descricao, .contato-medidas {
    width: auto;
    margin: 0 1em;
}

h1 {
    text-align: center;
}

nav {
    position: static;
}
.lista-beneficios, .imagem-beneficios {
    width: 100%;
}

.pontos-diferencial, .imagem-diferencial {
    width: 100%;
}
.produtos li {
    display: block;
    text-align: center;
    width: auto;
    margin: 1.5em 0;
}

.caixa {
    text-align: center;
    }
}
4 respostas
por Mateus
| 21.5k xp | 53 posts

Usa esses codigos. só não consegui mudar a parte do select

body {
            width: max-content;
        }

        form label {
            text-align: center;
        }

        .input-padrao {
            width: 90%;
            border: 2px solid;
        }

        form legend {
            text-align: center;
        }

        .enviar {
            display: block;
            margin: 0 auto;
        }

        table {
            margin: 0 auto;
        }
por Thuany Pereira de Macedo vermelho
| 50.8k xp | 3 posts

Quando coloco nesse código, ele desalinha a pagina no layout para computador e as demais

por Mateus
| 21.5k xp | 53 posts

você colocou dentro do @media screen and (max-width: 480px)? Uma boa dica é ficar testando o codigo direto da opção inspecionar do navegador.

por PAULO RICARDO SILVA DE MACEDO
| 88.2k xp | 9 posts

Lembrou de adicionar a tag <meta name="viewport" content="width=device-width"> no html?