Entrar Ainda não tem acesso?
2
respostas

Estou com duvida porque no celular está desconfigurando o projeto

Referente ao curso HTML e CSS: ambiente, estrutura e estilo

por GABRIEL GUSTAVO ALVES
| 5.7k xp | 2 posts
/*FONTES IMPORTADAS*/
@font-face {
    font-family: "Unbounded";
    src: url("../fontes/Unbounded-Bold.ttf") 
    format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("../fontes/Poppins-Regular.ttf") 
    format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/*RESETA CSS*/
*{
    margin: 0;
    padding: 0;
}
/*ESTILIZAÇÃO GERAL*/
body{
    background-color: #0E1014;
    color: #ffffff;;
}

header img{
    display: block;
    margin: 75px 0 0 360px;
}

h1{
    font-size: 64px;
    font-family: "Unbounded", sans-serif;
    text-align: center;
    margin-top: 60px;
    
}
h1 span{
    color: #9747FF;

}

p{
    
    font-size: 24px;
    font-family: "Poppins", sans-serif;
    text-align: center;
    margin: 24px auto 0;
    width: 792px;
    
}

a{
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    color: #ffffff;
    text-decoration: none;
    background-color: #9747FF;
    width: 340px;
    height: 66px;
    display: block;
    text-align: center;
    line-height: 66px;
    border-radius: 36px;
    margin: 40px auto;
    
}
a:hover{
    background-color: #8233E8;
    transition: 0.3s;}

section img{
    display: block;
    width: 792px;
    height: 446px;
    margin: 0 auto;
    margin-top: 40px;
}

@media (max-width: 768px){

    header img
    {
        margin: 65px 0 0 60px;
    }   
    p{
        width: 648px;
    }
}
@media (max-width: 375px){

        header img
        {
            margin: 32px 0 0 16px;

        }   
        h1{
            font-size: 40px;
        }
        p{
            font-size: 20px;
            width: 340px;
        }
        a{
            font-size: 20px;
            width: 251px;
        }
        section img{
            width: 340px;
            height: 230px;
        }
    }
2 respostas
por Rafaela Petelin Silvério
| 1614.8k xp | 3669 posts
Alura Scuba Team

Oi, Gabriel! Como vai?

Preciso de uma explicação um pouco mais detalhada sobre o que exatamente está desconfigurando no celular, assim consigo te orientar de forma mais precisa.

Mesmo assim, olhando seu código, o problema pode estar no uso de larguras e margens fixas em px, como width: 792px e margin: 75px 0 0 360px.
Esses valores ficam maiores que a largura da tela do celular e acabam fazendo o layout “estourar”.

Resolva fazendo o seguinte: use width: 100%, max-width, e centralize elementos sem margens fixas.

Veja este exemplo simples:


p{
    max-width: 792px;
    width: 100%;
    margin: 24px auto 0;
}

header img{
    margin: 40px auto 0;
    max-width: 100%;
    height: auto;
}

section img{
    max-width: 100%;
    height: auto;
}

O que esse código faz:

  • Evita que o layout ultrapasse a tela.
  • Deixa as imagens e textos responsivos.
  • Remove margens fixas que quebram no celular.

Se puder me dizer qual parte exata fica fora do lugar, ajusto sua solução mais assertivamente.

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado
por GABRIEL GUSTAVO ALVES
| 5.7k xp | 2 posts

Vou testar assim que chegar em casa, obrigado!!!