ajustando pagina para celular

Boa tarde, tudo certo?

Quando você usa o @media você também define as regras de formatação da página dentro de uma resolução específica, fiz um exemplo para você observar melhor como essa mudança ocorre (redimensione a página do navegador para ver o resultado):

<style>
.container{
    display: flex;
}

.div-1, .div-2, .div-3{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin: 10px;
}

.div-1{
    background-color: red;
}

.div-2{
    background-color: blue;
}

.div-3{
    background-color: green;
}

/*caso resolução for no máximo 992px*/
@media screen and (max-width: 992px) {
    .div-1{
        background-color: rgb(155, 110, 27);
    }

    .div-2{
        background-color: rgb(14, 240, 240);
    }

    .div-3{
        background-color: rgb(84, 13, 90);
    }
  }

/*caso resolução for no máximo 685px*/
  @media screen and (max-width: 685px) {
    .container{
        display: block;
    }
  }
</style>

<div class="container">
        <div class="div-1"></div>
        <div class="div-2"></div>
        <div class="div-3"></div>
 </div>

Como pôde ver, você consegue adaptar a página para qualquer tamanho de tela.