Formulário com foto

[John Hebert Trindade]

Boa noite pessoal, cá estou eu a recorrer a vossa ajuda novamente.

Tenho o formulário com uma foto do lado esquerdo e campos do tipo nome, endereço, cep, contatos do lado direito.

Fiz o seguinte, criei uma div com o nome de linha e dentro dela criei duas div com o nome de colunas.

Até aqui tudo bem, gostaria que fosse responsivo da seguinte forma, consoante o tamanho da tela ficasse um ao lado do outro e ao diminiuir a foto ficaria acima e os campos abaixo.

já mudei o display para todas as opções e inclusive utilizei o @media e não funciona, vejam se conseguem me ajudar.

<div class="row-input" id="dados_gerais">
  <div class="column" id="foto_cliente">
    <img id="img" src="app/adms/assets/images/users/1/foto.jpg">
  </div>
  <div class="column" id="dados_cliente">
     <div class="row-input">
          <div class="column">
             <label for="name" class="title-input">Nome:<span class="text-danger">*</span></label>
             <input type="text" name="name" id="name" class="input-adm" placeholder="Digite o nome completo" autocomplete="off" autofocus>
          </div>
     </div>
     <div class="row-input">
        <div class="column">
           <label for="morada" class="title-input">Morada:<span class="text-danger">*</span></label>
           <input type="text" name="morada" id="morada" class="input-adm" placeholder="Digite a morada">
        </div>
      </div>
      <div class="row-input">
          <div class="column">
             <label for="localidade" class="title-input">Localidade:<span class="text-danger">*</span></label>
             <input type="text" name="localidade" id="localidade" class="input-adm" placeholder="Digite a localidade">
          </div>
     	  <div class="column">
             <label for="codigo_postal" class="title-input">Código Postal:<span class="text-danger">*</span></label>
             <input type="text" name="codigo_postal" id="codigo_postal" data-js="postal" maxlength="8" class="input-adm" placeholder="0000-000">
          </div>
       </div>
  </div>
</div>

css

#dados_gerais{
  width: 100%;
  border: 1px solid #ccc;
  display: flex;
}

#foto_cliente{
  width: 30%;
  border: 1px solid #ccc;
  text-align: center;
  display: grid;
  align-items: center;
  justify-content: center;
}

#foto_cliente img{
  width: 90%;
  margin: 10px;
}

#dados_cliente{
  width: 70%;
  border: 1px solid #ccc;
}

.row-input{
	width: 100%;
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px 30px;
	margin-bottom: 20px;
}

 

[user]

Podes experimentar adicionar a seguinte propriedade a tua classe dados_gerais:
 

#dados_gerais{
  width: 100%;
  border: 1px solid #ccc;
  display: flex;
  flex-wrap: wrap;
}

"flex-wrap: wrap" faz com que os conteúdos de uma linha passem para a linha de baixo caso não caibam todos na primeira linha. Sendo que a segunda div (dados_cliente) deverá passar para debaixo da imagem caso as 2 divs (dados_cliente e foto_cliente) não caberem as duas lado a lado.

Nota: a propriedade "flex-wrap: wrap" apenas funciona em elementos que tenham a propriedade "display: flex"

Pessoalmente, eu faria as seguintes alterações também para ter a certeza que os elementos se comportavam como suposto:

#foto_cliente img{
  flex: 0 0 10%;
  margin: 10px;
}

#dados_cliente{
  flex: 1 1 90%;
  border: 1px solid #ccc;
}

Para fazer uma pagina/elemento responsivo utilizando flex, é necessário compreender o que cada propriedade faz para que se consiga obter o resultado pretendido. Aconselho te a veres este artigo sobre o Flex Layout em CSS: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Existe frameworks de CSS que facilitam bastante a construção de uma pagina responsiva, para além de muitas outras coisas. Caso faças muito trabalho de frontend, aconselho que aprendas a utilizar uma destas frameworks. Após a dominares (que não é muito difícil), conseguirás fazer uma pagina bonita sem desenvolver nenhuma classe CSS.
Recomendo TailwindCSS: https://tailwindcss.com/docs/flex

O TailwindCSS contem um conjunto de classes que te permitem construir layouts responsivos sem teres de criar tu as classes a mão

[John Hebert Trindade]

Obrigado pela resposta @user, mas agora responda outra coisa por favor.

porque quando uso o @media não funciona?

Coloquei da seguinte forma:

@media(max-width: 1024px){

  #foto_cliente{
    width: 100%;
  }

  #dados_cliente{
    width: 100%;
  }
}

@media(max-width: 768px){

  #foto_cliente{
    width: 100%;
  }

  #dados_clienteo{
    width: 100%;
  }
}

 

[user]

@John Hebert Trindade Julgo ser por apesar dos elementos estarem com width: 100%, eles não passam para baixo um do outro.

A maneira correta usando os breakpoints media queries seria alterar a direção do flex layout da classe 'dados_gerais':
'flex-direction: row' quando queres que os elementos estejam lado a lado
'flex-direction: column' quando queres que os elementos estejam por cima um do outro

também reparei que que tens a classe 'dados_clientes' mal escrito dentro da media query @media(max-width: 768px). Não está ali um 'o' a mais?