Entrar Ainda não tem acesso?
3
respostas

a pagina produtos é a unica que não fica em perfeito estado fica com formatação errada quando vista por tablet, celular e etc, gostaria de ajuda com isso

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Design responsivo e atividade Projeto da aula anterior

por Pedro Ivo Barreto Gomes
| 307.9k xp | 8 posts
pagina produtos

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Produtos - Armazem da Construção Mar Grande</title>

        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <div class="caixa">
                <h1><img src="logo.png"></h1>

                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>

        <main>
            <ul class="produtos">
                <li>
                    <h2>Torneira</h2>
                    <img src="torneira.jpg">
                    <p class="produto-descricao">A torneira Flex Gourmet é o que você precisa para dar um toque moderno em sua cozinha. Possui a bica flexível, que permite o ajuste do formato</p>
                    <p class="produto-preco">R$ 125,00</p>
                </li>
                <li>
                    <h2>Arco de Serra</h2>
                    <img src="arcodeserra.jpg">
                    <p class="produto-descricao">Serramento com perfeição</p>
                    <p class="produto-preco">R$ 38,00</p>
                </li>
                <li>
                    <h2>Caixa de Ferramenta Completa</h2>
                    <img src="kitferramenta.jpg">
                    <p class="produto-descricao">Caixa de Ferramenta completa 110 peças</p>
                    <p class="produto-preco">R$ 350,00</p>
                </li>
            </ul>
        </main>

        <footer>
            <img src="logo.png">
            <p class="copyright">&copy; Copyright Armazem da Construção Mar Grande - 2014</p>
        </footer>
    </body>
</html>

CSS responsive

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

h1 {
    text-align: center;
}

nav {
    position: static;
}


.lista-beneficios, .imagem-beneficios {
    width: auto;
}

}

3 respostas
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Pedro, tudo bem?

Segue um exemplo de como fazer a disposição dos elementos para os devices, smartphone e tablet:


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

h1 {
    text-align: center;
}

nav {
    position: static;
}

.produtos li{
    width: 20rem;
    margin-top: 0.5rem;
}
.lista-beneficios, .imagem-beneficios {
    width: auto;
}

}

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

h1 {
    text-align: center;
}

nav {
    position: static;
}
nav ul{
    width: auto;
    text-align: center;
}

.produtos li{
    width: 20rem;
    margin-top: 0.5rem;
}
.lista-beneficios, .imagem-beneficios {
    width: auto;
}

}

para o primeiro breakpoint defini uma largura máxima para .produtos li e adicionei um respiro entre os produtos:

.produtos li{
    width: 20rem;
    margin-top: 0.5rem;
}

Já para o tamanho de tablet, adicionei uma largura como automática e centralizei o menu ao centro do elemento:

nav ul{
    width: auto;
    text-align: center;
}

Qualquer dúvida, é só falar!

por Rosemeire das Graças Argentini Deconti
| 127k xp | 68 posts
Empreendedora

Laís, boa tarde!

Não entendi "para o primeiro breakpoint defini uma largura máxima para .produtos li e adicionei um respiro entre os produtos" ... o que seria breakpoint?

Grata

Rose Deconti

por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Rose!

Os breackpoints são as definições de medida para identificarmos os tamanhos de diferentes devices quando formos deixar nossas páginas responsivas. Então, podemos trabalhar com alguns breakpoints base, como esses:

  • 480px // Extra small screen
  • 768px // Small screen
  • 992px // Medium screen
  • 1200px // Large screen
  • 1600px // Extra Large screen
  • 1900px // Extra Large screen

Nessa lista acima, tem os breakpoints mais comuns, que vão desde de pequenas telas de celulares até monitores super grandes. Não necessariamente, precisa dar suporte a todos, mas precisamos dar aos tamanhos mais comuns, como o small, o medium e large.

Se ficou alguma dúvida, é só falar!