5
respostas

[Dúvida] Estou com dúvida no card do CSS.

É o seguinte, os meus 3 cards não estão ficando 100% de largura após abaixar para 720px, junto com os cards o texto que defini no css acabava ultrapassando os limites da tela reponsive. Segui o que ela foi desenvolvendo, porém no meu não ficava 100% reponsivo na tela mobile. Segue o codigo do HTML e CSS para me ajudarem, porque devo estar errando algum classe ou esqueci de adicionar um tag no css há mais.

<body> 
<header>
        <h1 class="logo">Rafael Lima Silva</h1>
        <nav class="cabecalho-nav">
            <ul class="cabecalho-lista">
                <li> <a href="/">Home</a></li>
                <li> <a href="/persona">Persona</a></li>
                <li> <a href="/habilidades">Habilidades</a></li>
            </ul>
        </nav>
            <div class="cabecalho-final">
                <a href="/contatos">Contatos</a>
            </div>
    </header>

    <main>
        <section class="conteudo-home">
            <img src="./Imagens/persona.jpg" alt="sou um homem de frente na tela">
            <div><h2 class="home-titulo">Rafael Lima Silva</h2>
                <p>Sou um design, apaixonado pelo arte e visual, com especialização de user experiencia!!!</p>
            </div>
        </section>
        <section class="conteudo-persona">
            <h2>A jornada de uma pessoa.</h2>
            <p>A tecnologia é a linguagem do futuro. Ela é importante em nossas vidas, por isso que sou entusiasta com a tecnologia</p>
            <p>Duwy é um site de portfólio pessoal elegante e profissional, projetado para criativos, freelancers e profissionais que desejam se destacar.</p>
            <p>Gosto de mostrar o meu talento, as pessoas olham o que faço, construa sua marca e impressione o mundo!</p>
        </section>
        <section class="conteudo-habilidades">
                <ul class="lista-habilidade">
                    <li> <img src="./Imagens/computador de mesa.jpg" alt="computador de mesa">
                        <div><h3>Aqui está a minha habilidades.</h3>
                        <p>A tecnologia é a linguagem do futuro. Ela é importante em nossas vidas, por isso que sou entusiasta com a tecnologia</p</div>
                    </li>
                    <li><img src="./Imagens/web-imagem-Londres.jpg" alt="imagem de Londres">
                        <div><h3>Sou formado em TI</h3>
                        <p>Uso a tecnologia porque é importante em nossas vidas, por isso que sou entusiasta com a tecnologia</p></div>
                    </li>
                    <li><img src="./Imagens/web-site mesa.jpg" alt="computador de mesa">
                        <div><h3>Sou formado em TI</h3>
                        <p>Uso a tecnologia porque é importante em nossas vidas, por isso que sou entusiasta com a tecnologia</p></div>
                    </li>
                </ul>
        </section>
    </main>
</body>
body { font-family: var(--fonte-principal); font-size: 20px; margin: 1em}
.logo {padding: 1em;text-align: center;}
h3 {font-size: 26px;}
h2, p {font-size: 32px;padding: 1em;}
.conteudo-home img {width: 100%;}
.conteudo-habilidades{width: 100%;}
.conteudo-habilidades ul li img {width: 100%;}
.conteudo-persona {text-align: center; padding: 2em;}
.home-titulo {text-align: center; padding: 1em;}
.cabecalho-lista, .cabecalho-final {
   display: none;
}
.lista-habilidade {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    list-style: none;
    gap: 1em;
}
.lista-habilidade ul li {
    grid-column: span 12;
}

@media screen and (min-width: 720px) {
    .conteudo-home img {
        width: 100%;
    }
    .cabecalho-nav {
        display: flex;
        justify-content: center;
        padding: 1rem 2rem;
    }

    .cabecalho-lista {
        display: flex;
        gap: 2rem;
        list-style: none;
        flex: 2;
    }

    .cabecalho-lista li a{
        text-decoration: none;
    }

    .logo {
        flex: 1;
        margin-left: 1rem;
    }

    header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .cabecalho-final {
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }

    .cabecalho-final a {
        text-decoration: none;
        margin-right: 2rem; /* empurra o item para longe do menu */
    }
 
    .conteudo-home {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .conteudo-home img {
        width: 500px;
        height: 700px;
        object-fit: cover;
    }

    .lista-habilidade li:nth-child(1){
        grid-column: 2 / span 3;
    }

    .lista-habilidade li:nth-child(2) {
        grid-column: 5 /  span 4;
    }
    .lista-habilidade li:nth-child(3) {
        grid-column: 9 / span 3;
    }

    .lista-habilidade li img {
        width: 300px;
        object-fit: cover;
    }
}
5 respostas

Oii, Rafael! Tudo bem?

Não consegui, aparentemente, identificar um problema em seu código. Para que eu possa ter a mesma visibilidade que você, poderia compartilhar o link do seu Github contendo o projeto completo, inclusive as imagens usadas, percebi que são diferentes. Dessa forma, poderei investigar melhor o que está acontecendo.

Fico no aguardo, até logo!

Oi Nathalia. Tudo bem? Segue o link do repositorio do projeto com as imagens usadas: https://github.com/RafaelKoppe/Dev-ExemploPortfolio#

Ei, Rafael!

Obrigada por retornar. Consegui visualizar bem como estava o retorno do seu projeto.

Você usou a classe .lista-habilidade ul li, não é preciso referenciar o ul já que .lista-habilidade já é uma <ul>. E o grid-column: span 12 precisa ser garantido dentro do @media abaixo de 720px também. Ou seja, fora do @media screen and (min-width: 720px).

Veja como ajustar:


.lista-habilidade li {
  grid-column: span 12;
}

Esse código garante que cada card ocupe 100% da largura quando estiver em telas pequenas (menores que 720px).E reforce no CSS geral:


.conteudo-habilidades {
  width: 100%;
  padding: 1em;
  box-sizing: border-box;
}

Foi adicionado o box-sizing: border-box para evitar que o padding estoure a largura.

Retorno:

Captura de tela em formato de gif mostrando o resultado das imagens adaptadas a tela no modelo mobile.

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada.

Bons estudos!

  Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Muito Obrigado Nathalia. Agradeço demais a sua atenção no problema que estava enfrentando, é verdade que na classe .lista-habilidade ul li não precisava referenciar o ul já que .lista-habilidade já é uma <ul>, realmente passei despercebido. Outra foi bom conhecer essa nova propriedade de box-sizing: border-box, que ajuda a evitar que o preenchimento (padding) e a borda (border) de um elemento "estourem" a largura ou altura definida. Já consegui avançar e precisei quebrar a cabeça com outro prototipo que fiz, mas ficou bem elegante e estético!

Outra dúvida, na classe div .conteud-persona precisava colocar o H2 o lado esquerdo e 3 tags P no lado direito, consegui usando o grid-template-columns: repeat(2, 1fr); cria 2 colunas de igual largura para conteúdo com um espaçamento (gap) entre elas. Porém precisava deixar os 2 ultimos paragrafos embaixo da 1 tag P alinhado horizontal. O que pensei foi acrescenter mais 2 divs, uma pegando as tags P e outra pegando as ultimas 2 tag P, com isso consegui manipular o layout com div que criei usando o diplay flex + definição da direção dos flex itens em rows. Foi bem trabalho e deu para pegar a ideia. Ficou certo a minha lógica ao abordar o desafio?

<section class="conteudo-persona">
            <h2>A jornada de uma pessoa.</h2>
            <div>
                <p>Duwy é um site de portfólio pessoal elegante e profissional, projetado para criativos, freelancers e profissionais que desejam se destacar.</p>
                <div class="linha2">
                    <p>A tecnologia é a linguagem do futuro. Ela é importante em nossas vidas, por isso que sou entusiasta com a tecnologia</p>
                    <p>Gosto de mostrar o meu talento, as pessoas olham o que faço, construa sua marca e impressione o mundo!</p>
                </div>
            </div>
        </section>
.conteudo-persona {
        padding: 1rem;
        margin-top: 1em;
        border-radius: 1rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        align-items: center;
    }

    .conteudo-persona .linha2 {
        /* grid-column: 2 / span 3; */
        font-size: 16px;
        display: flex;
        flex-direction: row;
        gap: 1rem; 
    }
    
    .conteudo-persona div {
        text-align: justify;
    }

No final o resultado ficou assim: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Ei, Rafael!

Que bom acompanhar você treinando, Rafael, achei que ficou ótimo!

E sim, sua lógica está certa e funciona como esperado, podemos ver pela imagem. Mais uma vez, parabéns por enfrentar o desafio e por praticar muito! Isso é ótimo para o seu desenvolvimento técnico.

Continue nesse ritmo que você vai longe!

Bons estudos, Rafael!