1
resposta

responsividade

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

1 resposta

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!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software