Projeto Redes Sociais não responsivo

[mrdhmcl]

Oi, pessoal.

O meu projeto das redes sociais está funcionando perfeitamente no computador, mas, no celular, os botões que criei para as redes sociais ficam por trás do telefone. Seria um caso de redimensionar a imagem do celular no site?

Link do github pages: https://mrdhmcl.github.io/social-project Link do meu código HTML: https://github.com/mrdhmcl/social-project/blob/main/index.html Link das CSS (body): https://github.com/mrdhmcl/social-project/blob/main/styles/style.css Link das CSS (botões de mídias sociais): https://github.com/mrdhmcl/social-project/blob/main/styles/social.css

Segue o print.

[ghost]

Seria um caso de redimensionar a imagem do celular no site?

Sim, porque você precisaria de media queries pra ajustar isso.

[BenjamimCS]

Você pode optar em por um elemento posicionado relativo e dá a ele um z-index maior pra sobrepor o celular em vez de ficar atrás — ou absoluto que já sobrepõe. Poderia usar a mesma técnica do Guanabara no Projeto Cordel nas fontes pra dá um redimensionamento nos elementos conforme a largura, mas não acho essa uma maneira mais viável, é só teoria.

[SilasRodrigues19]

Como já foi dito, tem 2 possíveis soluções que são mais simples com position: relative ou com z-index. O que eu te indicaria a fazer é adicionar essa linha no section#mobile: z-index: -1; ou colocar position: relative; na #social-media. Ficaria assim:

section#mobile {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 627px;
    width: 311px;
    background: url(../images/frame-iphone.png) no-repeat center;
}

ou

#social-media {
    text-align: right;
    position: relative;
}

[deysemartellet]

Pra mim não funcionou nenhum dos dois. Inclusive, bagunçou o do computador e não teve efeito no celular. ): O jeito seria esperar pelas aulas de query?

[BenjamimCS]

Fiz alguns testes aqui e percebi que o o z-index negativo some com o celular, isso porque o main tem um position: relative e aparenta ser z-index: 1. Se for esse o problema, dê position: relative para o conteiner do nav, ou ao nav caso seja irmão do #mobile.

Você disse que nenhum funcionou. Eu não sei como você defineu seu HTML e CSS. Caso esteja com o repositório aqui, posso ajudar melhor, ou dê mais detalhes, por favor.

P.S.: ah, remova do código o que foi definido antes, por favor, assim saberemos onde estamos ;)