[Dúvida] Como otimizar para mobile a pagina de contatos e produtos? | HTML5 e CSS3 parte 4: avançando no CSS

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Design responsivo e atividade Próximos passos

por Adriany Cristiny Mendonça Corrêa

| 54.1k xp | 10 posts

Estagiária - Desenvolvimento Full Stack

Mesmo as páginas contato.html e produto.html não consegui utilizar o CSS para otimizar o cabeçalho e o rodapé das páginas correspondentes para a versão mobile, o código abaixo só funciona na página principal mesmo utilizando o mesmo style.css nas 3 páginas do projeto.

Como faço para usar esse código para as 3 páginas e não apenas para a home?

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

Tentei utilizar essa parte para a página de produtos e contato, mas não funcionou assim como o cabeçalho e o rodapé não funcionaram. Obs.: Encontrei essa possível solução aqui no fórum.

.produtos li{
    display: block;
    width: auto;
    margin: 20px 20px;
}

input.checkbox{
    width: 150px;
    height: 50px;
}

2 respostas

solução!

por Renan Lima

| 2870.7k xp | 5974 posts

Instrutor Scuba Team

20/01/2023

Olá, Adriany.

Tudo bem?

Para o modo responsivo funcionar em todas as páginas. elas precisam ter a tag Meta ViewPort dentro do <head>, caso contrário os códigos dentro do @media não vão fazer diferença:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Essa tag que sabe o tamanho da janela e quando precisa mudar os estilos.

Espero ter ajudado. Qualquer dúvida manda aqui.

por Adriany Cristiny Mendonça Corrêa

| 54.1k xp | 10 posts

Estagiária - Desenvolvimento Full Stack

20/01/2023

Obrigada pelo retorno! :) Fiz algumas pequenas modificações na margem que deixaram os produtos, o formulário e a tabela mais centralizados.

Segue abaixo como ficou:

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

    .produtos li{
        display: block;
        position: static;
        margin: 2em 40px;
        padding: 20px;
    }

    input.checkbox{
        width: 150px;
        height: 50px;
    }

    .form-contatos {
        margin: 1em 20px;
    }

    .tablela-horarios {
        margin: 1em 20px;
    }
}

Obs.: Criei uma class para o formulário e para a tabela (página de contatos) para poder ajustar o tamanho a maneira como gostaria que ficasse na página. Se alguém quiser usar, lembre-se de alterar o tamanho da letra que fica dentro da caixa do enviar para auto.

.enviar {
    width:40%;
    padding: 15px 0;
    background: orange;
    color: white;
    font-weight: bold;
  **  font-size: auto;**
    border: none;
    border-radius: 5px;
    transition: 1s all;
    cursor: pointer;
}