Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

[Dúvida] Elementos vazando e não ocupando toda a largura da tela redimensionada

Referente ao curso HTML e CSS: trabalhando com responsividade e publicação de projetos

por Filipe Magno De Oliveira Braga
| 128.7k xp | 30 posts
Software Developer

Prezados colegas, tudo bem?

Fazendo o curso, ao simular diferentes emulações de dispositivo (Ctrl + Shift + M) deparei com uma situação estranha que conferindo no código (com o do repositório do curso), não encontrei nenhuma diferença:

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeComo podem ver, se eu encurto muito, o cabeçalho começa a vazar a tela (comendo a palavra Home) e outros elementos, ficam a esquerda.

5 respostas
por Ed Fernandes
| 75.7k xp | 42 posts

Para resolver isso, você pode adicionar regras de estilo CSS para tornar sua página responsiva. Isso geralmente envolve o uso de media queries, que são trechos de código CSS que definem estilos diferentes para diferentes tamanhos de tela.

Se você tiver o código HTML e CSS específico que está causando esse problema, posso ajudar a revisá-lo e oferecer uma ajuda mais precisas.

por Filipe Magno De Oliveira Braga
| 128.7k xp | 30 posts
Software Developer

Opa Ed, obrigado pela resposta!

Já até estou usando algumas recomendações para ser responsiva, mas talvez eu tenha explorado o redimensionamento de maneira diferente ao curso:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

:root {
    --cor-primaria: #000000;
    --cor-secundaria: #F6F6F6;
    --cor-terciaria: #22D4FD;
    --cor-hover: #272727;

    --fonte-primaria:'Krona One', sans-serif;
    --fonte-secundaria:'Montserrat' sans-serif;
}

* {
    margin: 0;
    padding: 0;   
    text-decoration: none;
}

body {
    box-sizing: border-box;
    background-color: var(--cor-primaria);
    color:  var(--cor-secundaria);
}

.cabecalho {
    padding: 2% 0 0 15%;    
}

.cabecalho__menu {
    display: flex;
    gap: 80px;
}

.cabecalho__menu__link { 
    font-family: var(--fonte-secundaria);
    font-size: 24px;
    font-weight: 600;
    color: var(--cor-terciaria);
}

.titulo-destaque {
    color: var(--cor-terciaria);
}

.titulo-destaque:hover {
    color: #2622fd;
}

.apresentacao {
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 82px;
}

.apresentacao__conteudo {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__conteudo__titulo {
    font-size: 2.25rem;
    font-family: var(--fonte-primaria);
}

.apresentacao__conteudo__texto {
    font-size: 1.5rem;
    font-family: var(--fonte-secundaria);
}

.apresentacao__links {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.apresentacao__links__subtitulo {
    font-family: var(--fonte-primaria);
    font-weight: 400;
    font-size: 1.5rem;
}

.apresentacao__links__botao {  
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2px solid var(--cor-terciaria);
    text-align: center;
    width: 50%;
    padding: 21.5px 0;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cor-secundaria);
    font-family: var(--fonte-secundaria);
}

.apresentacao__links__botao:hover {
    background-color: #272727;
}

.apresentacao__imagem {
    width: 50%;
}

.rodape {
    color: var(--cor-primaria);
    background-color: var(--cor-terciaria);
    padding: 24px;
    text-align: center;
    font-family: var(--fonte-secundaria);
    font-size: 1.5rem;
    font-weight: 400;
}

@media(max-width: 1200px) {
    .cabecalho {
        padding: 10%;
    }

    .cabecalho__menu {
        justify-content: center;
    }

    .apresentacao {
        flex-direction: column-reverse;
        padding: 5%;
    }

    .apresentacao__conteudo {
        width: auto;
    }
}

Esse é o CSS atual do projeto.

por Filipe Magno De Oliveira Braga
| 128.7k xp | 30 posts
Software Developer

Aqui, o HTML:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./styles/style.css"> 
        <title>Portfolio Alura</title>
    </head>
    <body>
        <header class="cabecalho">
            <nav class="cabecalho__menu">
                <a class="cabecalho__menu__link" href="index.html">Home</a>
                <a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
            </nav>
        </header>
        <main class="apresentacao">
            <section class="apresentacao__conteudo">
                <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="titulo-destaque">um Front-end de qualidade!</strong></h1>
                <p class="apresentacao__conteudo__texto">Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
                <div class="apresentacao__links">
                    <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
                    <a class="apresentacao__links__botao" href="https://github.com" target="blank">
                        <img src="./assets/github.png">
                        Github
                    </a>
                    <a class="apresentacao__links__botao" href="https://linkedin.com" target="blank">
                        <img src="./assets/linkedin.png">
                        Linkedin
                    </a>
                    <a class="apresentacao__links__botao" href="https://twitch.tv" target="blank">
                        <img src="./assets/twitch.png">
                        Twitch
                    </a>
                </div>
            </section>
            <img class="apresentacao__imagem" src="./assets/imagem.png" alt="Joana Santos desenvolvendo em um notebook com diversos adesivos">
        </main>
        <footer class="rodape">
            <p>Desenvolvido por Filipe Braga</p>
        </footer>
    </body>
</html>
solução!
por Ed Fernandes
| 75.7k xp | 42 posts

criei um @media scren para a tela se adaptar quando for menor que 320px até uns 90px de largura fica boa, mas menor que isso começa a quebrar novamente. adicionei alguns comentarios ao codigo pra melhor entendimento.

Como eu não tinha as imagens das redes Sociais que você utilizou, talvez precise editar seus respectivos CSS, mas qualquer dúvida é só falar.

imagem de como ficou.

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

aqui está o codigo CSS que modifiquei:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

:root {
    --cor-primaria: #000000;
    --cor-secundaria: #F6F6F6;
    --cor-terciaria: #22D4FD;
    --cor-hover: #272727;

    --fonte-primaria:'Krona One', sans-serif;
    --fonte-secundaria:'Montserrat' sans-serif;
}

* {
    margin: 0;
    padding: 0;   
    text-decoration: none;
}

body {
    box-sizing: border-box;
    background-color: var(--cor-primaria);
    color:  var(--cor-secundaria);
}

.cabecalho {
    padding: 2% 0 0 15%;    
}

.cabecalho__menu {
    display: flex;
    gap: 80px;
}

.cabecalho__menu__link { 
    font-family: var(--fonte-secundaria);
    font-size: 24px;
    font-weight: 600;
    color: var(--cor-terciaria);
}

.titulo-destaque {
    color: var(--cor-terciaria);
}

.titulo-destaque:hover {
    color: #2622fd;
}

.apresentacao {
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 82px;
}

.apresentacao__conteudo {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__conteudo__titulo {
    font-size: 2.25rem;
    font-family: var(--fonte-primaria);
}

.apresentacao__conteudo__texto {
    font-size: 1.5rem;
    font-family: var(--fonte-secundaria);
}

.apresentacao__links {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.apresentacao__links__subtitulo {
    font-family: var(--fonte-primaria);
    font-weight: 400;
    font-size: 1.5rem;
}

.apresentacao__links__botao {  
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2px solid var(--cor-terciaria);
    text-align: center;
    width: 50%;
    padding: 21.5px 0;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cor-secundaria);
    font-family: var(--fonte-secundaria);
}

.apresentacao__links__botao:hover {
    background-color: #272727;
}

.apresentacao__imagem {
    width: 50%;
}

.rodape {
    color: var(--cor-primaria);
    background-color: var(--cor-terciaria);
    padding: 24px;
    text-align: center;
    font-family: var(--fonte-secundaria);
    font-size: 1.5rem;
    font-weight: 400;
}
/* media query para telas menores que 320px */
@media (max-width: 319px) {
    .cabecalho {
        padding: 10% 2%  !important;
    }

    .cabecalho__menu {
        justify-content: center;
        gap: 20px; /* Reduzir o espaçamento entre os links do menu */
    }

    .cabecalho__menu__link {
        font-size: 10vw;
    }

    .apresentacao {
        flex-direction: column-reverse;
        padding: 5% 5%;
    }

    .apresentacao__conteudo {
        width: 100% !important; /* Ocupar a largura total */
        text-align: center; /* Centralizar o conteúdo */
        gap: 20px; /* Reduzir o espaçamento entre os elementos */
    }

    .apresentacao__conteudo__titulo {
        font-size: 9.1vw; /* Reduzir o tamanho do título */
    }

    .apresentacao__conteudo__texto {
        font-size: 15vw; /* Reduzir o tamanho do texto */
    }

    .apresentacao__links {
        flex-direction: column !important;
        gap: 10px; /* Reduzir o espaçamento entre os links */
    }

    .apresentacao__links__subtitulo {
        font-size: 1rem; /* Reduzir o tamanho do subtítulo */
    }

    .apresentacao__links__botao {
        width: 100%; /* Ocupar a largura total */
        font-size: 1rem; /* Reduzir o tamanho do botão */
        justify-content: flex-start  !important;
    }

    .apresentacao__imagem {
        width: 100%; /* Ocupar a largura total */
    }

    .rodape {
        padding: 5px  !important;
        font-size: 1rem; /* Reduzir o tamanho do texto no rodapé */
    }
}

@media(max-width: 1200px) {
    .cabecalho {
        padding: 10%;
    }

    .cabecalho__menu {
        justify-content: center;
    }

    .apresentacao {
        flex-direction: column-reverse;
        padding: 5%;
    }

    .apresentacao__conteudo {
        width: auto;
    }
}

Espero ter ajudado ou pelomenos dado uma luz de como proceder agora, qualquer dúvida é só chamar.

por Filipe Magno De Oliveira Braga
| 128.7k xp | 30 posts
Software Developer

Perfeito Ed!! Funcionou bem demais!