Desafio para implemetação na aba produtos e contato | HTML5 e CSS3 parte 4: avançando no CSS

Solucionado (ver solução)

Solucionado
(ver solução)

7
respostas

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Design responsivo e atividade Adaptar uma página para celular

por Alessandro da Silva Lira

| 117.6k xp | 8 posts

Suporte TI

Olá, acho que estou fazendo algo de errado, porque a minha aba de contatos ou de produtos não sofrem alterações quando realizo a mudança no meu style.css mesmo as duas estando com o link para esse css de estilo `

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">

Aqui está meu css com o @media

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

    .principal, .conteudo-beneficios {
        margin: 0 10% 0 10%;
    }

    .video {
        margin: 10% 10%
    }

    .imagem-beneficios {
        margin: 5% 0 0 0;
    }

    h1 {
        text-align: center;
    }

    nav {
        position: static;
    }

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

Não sei o que pode estar acontecendo para não puxar as informações para as outras abas

7 respostas

por Lorena Garcia

| 6747.6k xp | 9816 posts

Alura Scuba Team Monitora

19/05/2022

Oi Alessandro, tudo bem?

No seu index.html, tem as tags metas? Principalmente a tag <meta name="viewport" content="width=device-width">?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Contato - Barbearia Alura</title>

Se tiver e esse não for o erro, você pode por favor, mandar o código completo? Seja num repositório github ou por aqui?

Obrigada.

por Alessandro da Silva Lira

| 117.6k xp | 8 posts

Suporte TI

01/06/2022

Olá Lorena, eu verifiquei em meu código e realmente não estava inserida a tag no contato.html e produto.htm.

Na pagina de contato funcionou perfeitamente, no entanto, na aba de produto não, tentei verificar o que poderia estar acontecendo mas não consegui identificar o erro, você poderia me ajudar?

Eu coloquei os arquivos um repositório no github https://github.com/Alessandrolira/Barbearia-Alura

solução!

por Lorena Garcia

| 6747.6k xp | 9816 posts

Alura Scuba Team Monitora

01/06/2022

Oi Alessadro, tudo bem?

Então, agora você tem que ir no seu @media screen e fazer as adaptações para a página de produtos, verifiquei aqui e você ainda não fez as modificações para tela 480px.

Vai ficar algo assim:

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

     h1 {
         text-align: center;
     }

     nav {
         position: static;
        text-align: center;
     }

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

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

Aí você tem quem adaptar oprodutos li e o que mais você desejar.

Espero ter ajudado e bons estudos. (:

por Jeziel Fiuza Laia

| 47.3k xp | 2 posts

Vendedor

01/06/2022

Olá, tudo bem Lorena? Estou com a mesma dificuldade com relação a aba produtos, ainda não consegui alinhar todos os elementos na tela. Poderia me ajudar, por favor?

@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, .produtos li {
    width: 100%;
}

.produtos {
    width: auto;

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

por Lorena Garcia

| 6747.6k xp | 9816 posts

Alura Scuba Team Monitora

02/06/2022

Oi Jeziel, tudo bem?

Não sei se veio todo seu código CSS ou se cortou o finalzinho, mas você precisa alinha o texto dos produtos no centro, com text-align: center;.

Depois você passa para .produtos li, onde você pode dar uma altura pra ele, teste colocando width: 90%;, uma margin-bottom: 10px; também pode ser uma boa e alinhar os itens no centro com align-items: center;.

Você pode ir testando os valores e o que você gostaria de modificar, lembrando que esse é um desafio pra exercitar mesmo, sem medo de errar e ir experimentando.

Bons estudos!

por Jeziel Fiuza Laia

| 47.3k xp | 2 posts

Vendedor

02/06/2022

Boa noite

Lorena,

Muito obrigado, os passos que você me sugeriu ajudaram bastante.

por Israel Kilday Machado De Souza

| 146.4k xp | 4 posts

04/06/2022

olá pessoal, me referindo a página de produtos pra esse código ficar mais limpo eu fiz assim e deu muito certo!

@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, .produtos li {
    width: 100%;
}

.produtos {        
    display: flex;
    flex-direction: column;
    width: auto;
    align-items: center;
}

}