1
resposta

@MEDIA - MOBILE (produtos)

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 BRENDA DA SILVA MEDEIROS
| 44.7k xp | 19 posts

Olá tudo bem?

Na parte de produtos a lista de "Cabelo + Barba" na versão mobile está fora de enquadro (borda, margem) ele fica um pouco menor, comparado com os outros. Ele fica igual quando eu tiro o (display: inline-block) do CSS mas se eu tiro interfere a versão PC. O que eu faço?

OBS: Cabelo e Barba quando eu passo o mouse aparece Li 349,22 x 437,31 no Cabelo + Barba Li 329,22 x 417,31. Não estou sabendo corrigir. 

.produtos {
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;


}
.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 3px solid #000000;
    border-radius: 10px; 
}

.produtos li:hover {
    border-color: #C78C19;

}

.produtos li:active {
    border-color: #C88C19;
}

.produtos li:hover h2{
    font-size: 35px; 
}

.produtos h2 {
    font-size: 30px;
    font-weight: bold;
}

.produto-preco {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10%;
}
1 resposta
por Akashi
| 220.4k xp | 284 posts

Olá Brenda,

Você acrescentou isto ao final do css?

Pelo que entendi na aula 6 atividade 2, onde isto foi explicado, é que a configuração @media no css altera somente a visualização em telas menores que 480px, no caso.

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