Entrar Ainda não tem acesso?
2
respostas

Dúvida sobre responsividade

Referente ao curso Flexbox: posicione elementos na tela

por Alessandra Elisa Santana
| 65.5k xp | 7 posts
Auxiliar de E-Commerce

Boa tarde! Estou tentando deixar minha Landing Page responsiva, e em algumas resoluções (por exemplo: iPad Air 820 x 1180) fica uma "barra" de outra cor abaixo do footer, como se repartisse a página. Como resolver isso?

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Balle Bot - Modere a sua comunidade do Discord</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="cabecalho">
        <img class="cabecalho-imagem" src="Vector.svg" alt="Logo da comunidade">
        <nav class="menu-cabecalho">
            <a class="cabecalho-menu-item"><strong>Comunidade Ballerini</strong></a>
            <a class="cabecalho-menu-item"><strong>Tutorial</strong></a>
            <a class="cabecalho-menu-item"><strong>Open Source</strong></a>
            <a class="cabecalho-menu-item"><strong>Comandos</strong></a>
        </nav>
    </header>
    <main class="conteudo">
        <section class="secao-principal">
            <div class="div-secao">
                <h1 class="titulo">Balle Bot</h1>
                <h2 class="subtitulo">Deixe a sua comunidade segura de um jeito fácil</h2>
                <button class="botao"><strong>Me adicione!</strong></button>
            </div>
            <img class="imagem-balle" src="Group 4.png" alt=""Imagem da Balle Bot>
        </section>
        <section class="secao-paragrafos">
            <h3 class="titulo-paragrafos">O que ela faz por você?</h3>
            <p class="paragrafo">1. Cria um <strong>sistema de verificação capcha</strong> para novos membros garantirem que não são robôs</p>
            <p class="paragrafo">2. Possui um <strong>sistema de banimento automático</strong> para links suspeitos que forem enviados na comunidade</p>
            <p class="paragrafo" class="ultimo">3. <strong>Sistema de avisos e banimento manual</strong>, para pessoas administradoras utilizarem</p>
        </section>
        <footer class="rodape">
            <img class="logo-footer" src="BALLERINI.svg" alt="Logo Ballerini">
        </footer>
    </main>
</body>
</html>
2 respostas
por Alessandra Elisa Santana
| 65.5k xp | 7 posts
Auxiliar de E-Commerce

CSS

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Righteous&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

body {
    font-size: 100%;
    background: linear-gradient(68.15deg, #2F2325 16.62%, #8E5D52 85.61%);
}

.cabecalho {
    display: flex;
    flex-direction: center;
    align-items: center;
    justify-content: space-around;
    padding: 24px;
}

.cabecalho-imagem {
    height: 72px;
}

.menu-cabecalho {
    display: flex;
    gap: 32px;
}

.cabecalho-menu-item {
    font-family: 'Lato', sans-serif;
    color: #FFF2E7;
    font-size: 20px;
}

.cabecalho-menu-item:hover {
    cursor: pointer;
    color: rgba(236, 214, 196, 0.53);
}

.conteudo {
    margin-bottom: 42px;
    border-top: 0.1px solid #FFF2E7;
}

.secao-principal {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.div-secao {
    display: flex;
    flex-direction: column;
    gap: 32px; /*espaçamento*/
}

.titulo {
    font-family: 'Righteous', cursive;
    color: #FFF2E7;
    font-weight: 400px;
    font-size: 64px;
}

.subtitulo {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 24px;
    color: #ECD6C4;
}

.botao {
    background-color: #ECD6C4;
    width: 150px;
    height: 65px;
    border: none;
    box-shadow: 4px 5px 4px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    color: #2f2325;
}

.botao:hover {
    background-color: rgba(236, 214, 196, 0.53);
    cursor: pointer;
}

.imagem-balle {
    height: 380px;
}

.secao-paragrafos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    margin-top: 25px;
    margin-bottom: 40px;
}

.titulo-paragrafos {
    border-top: 0.4px solid #FFF2E7;
    padding-top: 45px;
    font-family: 'Righteous', cursive;
    font-weight: 400;
    font-size: 24px;
    color: #FFF2EF;
    margin-bottom: 16px;
}

.paragrafo {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: #ECD6C4;
}

.rodape {
    border-top: 0.4px solid #FFF2E7;
    padding: 28px;
}
.logo-footer {
    height: 48px;
    display: block;
    margin: 0 auto;
}

/* Responsividade */
@media screen and (max-width: 560px) {
.cabecalho .cabecalho-imagem {
    height: 50px;
    margin-right: 15px;
}

.cabecalho .cabecalho-menu-item {
    font-size: 10px;
}

.secao-principal .titulo {
    font-size: 30px;
    margin-left: 35px;
    margin-top: 40px;
}

.subtitulo {
    font-size: 15px;
    margin-left: 15px;
}

.imagem-balle {
    height: 150px;
    margin-right: 10px;
}

.botao {
    width: 130px;
    height: 50px;
    border: none;
    box-shadow: 4px 5px 4px rgba(0, 0, 0, 0.25);
    border-radius: 25px;
    font-size: 15px;
    margin-left: 15px;
    margin-bottom: 40px;
}

.paragrafo {
    font-size: 18px;
    margin: 15px;
}
}

@media screen and (max-width: 960px) {
.cabecalho {
    display: flex;
    justify-content: flex-start;
}

.cabecalho-imagem {
    margin-right: 50px;
}

.titulo {
    font-size: 60px;
    margin-left: 35px;
}

.subtitulo {
    font-size: 25px;
    margin-left: 35px;
}

.botao {
    margin-left: 35px;
}

.imagem-balle {
    height: 200x;
    margin-right: 35px;
}

.paragrafo {
    font-size: 18px;
    margin: 15px;
}
}
por Luan Carlos Rodrigues Da Costa
| 45k xp | 24 posts

Boa noite, tenta isso aqui : codigo antigo: .rodape { border-top: 0.4px solid #FFF2E7; padding: 28px; } código novo:

.rodape { border-top: 0.4px solid #FFF2E7; padding: 28px; box-sizing: border-box }