eu tentei tornar meu site responsivo, mais ao abrir pelo celular o site não está 100%.
https://aluraplus-eterxxa4d-gabrielromer.vercel.app/ https://github.dev/GabrielRomer/Aluraplus
eu tentei tornar meu site responsivo, mais ao abrir pelo celular o site não está 100%.
https://aluraplus-eterxxa4d-gabrielromer.vercel.app/ https://github.dev/GabrielRomer/Aluraplus
Olá Gabriel!
Para alinhar melhor o seu código, adicione as classes container
e secundario da terceira seção
ao seu arquivo index.html, conforme exemplificado abaixo:
<section class="container secundario container__secundario">
<div class="container__descricao">
<p class="descricao__texto">Só o Combo+ oferece Alura+ e Alura Língua juntos para você ter acesso a cursos de diversas áreas da
tecnologia e aprender inglês ou espanhol, onde e como quiser.</p>
<a href="www.alura.com.br" class="container__botao secundario__botao">Assinar o Combo+</a>
</div>
<img src="img/Telas.png" alt="Tela da alura plus e do alura lingua" class="secundario__imagem">
</section>
Logo em seguida, devemos modificar o arquivo CSS para aprimorar a responsividade. Aqui está o código com os ajustes necessários:
@media screen and (max-width:768px){
/*container*/
.container{
display: block;
background-image: none;
}
.container__imagem{
width: 50%;
}
.container__caixa{
margin: 2em;
}
.container__secundario{
display: flex;
flex-direction: column-reverse;
}
.secundario{
margin: 0;
text-align: center;
}
.secundario__imagem{
width: 50%;
align-items: center;
}
/* dispositivos */
.dispositivos{
display: block;
}
.dispositivos__lista{
display: block;
}
.descricao_titulo {
display: block;
align-items: center;
}
.descricao__texto{
text-align: center;
}
/*rodape */
.rodape{
display: block;
}
.rodape__lista{
display: block;
}
.rodape__texto{
display: block;
}
}
Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!