Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Problema quando em dispositivo móvel

Colegas, preciso da ajuda de vocês. quando em dispositvos móveis (celulares experimentei em 3 diferentes) ocorre que o body de ambas as páginas estão mais largas do que as telas dos dispositivos, então para centrar o conteúdo do rodapé, tenho que arrastar o conteudo para o lado esquerdo, assim o conteudo do rodapé nao fica cortado. Na verdade abre parecendo centrado, mas o rodapé fica fora.

https://portfolio-rogeroliveira.vercel.app/index.html

https://github.com/rogeroliveirars

Alguém me ajuda?

3 respostas
solução!

Olá amigo,

Talvez seu rodapé esteja com algum padding na direita (right), por isso a diferença... Tenta colocar o padding em 0% para todos os lados nos itens do rodapé e veja se dá certo!

Eu vi no seu código que voce utilizou padding-top e colocou 4 valores diferentes:

    .rodape{
        /*word-wrap: inherit;*/
        padding-top: 0% 10% 0% 0%;
        white-space: nowrap;
        display: flex;
        flex-direction: column;
        margin:0%;
        gap: 0.75rem;
        font-size: 1,7rem;
        display: flex;
        align-items: center; /* Centraliza verticalmente */
    }
    

padding-top: 0% 10% 0% 0%; o top já indica onde será colocado o padding, no caso em cima. Quando se usa 4 valores, você especifica as 4 direções diferentes. Ficaria assim:

padding: 5%;

adiciona o padding para todos os lados (cima, direita, baixo, esquerda).

padding: 5% 10%;

adiciona o padding de 5% para cima e para baixo, e 10% para a esquerda e para a direita.

padding: 1% 2% 3% 4%;

adiciona o padding de 1% para cima; 2% para a direita; 3% para baixo; 4% para a esquerda;


Caso você queira especificar apenas o valor de uma direção, pode usar assim:

padding-top: 10%;

adiciona um padding para cima de 10%

padding-left:5%;

adiciona um padding para esquerda de 5% e etc...


Mas voltando a sua duvida.... Vê também se retirar a margem da ancora no rodapé se resolve

    .rodape__ancora{
        margin-left: 3.125rem;
        text-decoration: none;
    }
    

No rodapé, você pode colocar também só o texto e o email como

dentro da classe rodapé. Depois usar text-align:center para alinha-los ao centro da página... (sem precisar de usar a div)

Espero que dê certo

Oii Letícia, tudo jóia? Muito obrigado pelas dicas, dá uma olhadinha aqui no link, esta abrindo e navegando? qualquer coisa me grita la no Discord, e disponha sempre, um grande abraço!

https://portfolio-rogeroliveira.vercel.app/

No CSS:

Apaga o padding da classe .texto__link__rodape:

.texto__link__rodape {
    padding-right: 2rem;
}

Edita esse padding:

.rodape {
    padding-top: 0% 10% 0% 0%; 
}

por:

.rodape {
padding-top: 10%; 
}

EXCLUIR padding: 24px e padding: 1rem da classe .rodape do @media (max-width: 1200px):

.rodape {
    padding: 24px;
    padding: 1rem;
}

Funcionou aqui. Abraços!