Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Ajustando a tela para o smartphone - Produtos

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Melhorando o CSS e atividade Pseudo-classes

por Juliana Giachini
| 100.5k xp | 3 posts

Oi, eu já li e reli não encontro meu erro. Pra pagina na web ta beleza; Quando vou ajustar pra smartphone a tela, a home e o contato fica ok. Mas 'Produtos' fica muito pequeno e o background nao fica 100%. Testei de algumas maneiras q vieram na minha mente mas nao deu certo...

coloquei no html o meta name="viewport" content="width=device-width". e no css:

@media screen and (max-width: 480px) { .caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video{ width: auto; } }

h1{ text-align: center; }

nav{ position: static; }

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

2 respostas
solução!
por Lorena Garcia
| 8304.5k xp | 12158 posts
Alura Scuba Team Suporte Educacional

Oi Juliana, tudo bem?

Para fazer a parte de Produtos, você precisa chamar também na hora de fazer a responsividade. Algo nesse tipo: 

.produtos {
        width: auto;
        text-align: center;
}

    .produtos li {
        width: 90%;
        margin-bottom: 10px;
        align-items: center;
}

Pode colocar logo abaixo de: .lista-beneficios, .imagem-beneficios.

Espero ter ajudado e bons estudos.

por Maurício Prado Figueirôa
| 49.1k xp | 5 posts
Webmaster

Muito obrigado, foi minha dúvida também!