1

Boa noite a todos colegas.. Estou pesquisando muito e não consigo achar uma solução para o seguinte problema. Não consigo manter alinhado de nada como mostra a figura abaixo:inserir a descrição da imagem aqui

Baixei vários modelos mas nenhum deu certo . Ou as fotos ficam iguais a primeira linha ou a primeira linha fica igual a segunda. Alguém poderia me orientar? Obs: o site somente fotos e 1 formulário Obrigado

2
  • Já tentou fazer o seu próprio? Bootstrap tem muita coisa pronta pra te ajudar nisso ai. Se não quiser usar framework tem o grid e o flexbox do css.
    – Francisco
    Commented 3/03/2019 às 2:41
  • Fizeram pra mim e eu achei que focou cheio de espaços.. e o meu site desejado é largo .. Eu não sei alterar as medidas no bootstrap.. Acabei perdendo tudo Commented 3/03/2019 às 2:47

1 Resposta 1

1

Você pode usar o flexbox para fazer o que deseja. Basicamente, criamos um layout com duas linhas (rows) e dentro delas colocamos os nossos blocos.

Para que os blocos quebrem conforme o tamanho da tela do usuário diminua, basta aplicar um flex-wrap: wrap nas rows, que estão como display: flex para que o layout se ajuste.

No caso, vamos aplicar a propriedade em questão dentro de um media query, já que só queremos que o efeito seja aplicado quando a tela tiver tamanho igual ou inferior a 500px.

Algo assim:

* {
  box-sizing: border-box;
}

section {
  margin: 10px;
  padding: 15px;
  border: dashed 1px #000;
}

.row {
  display: flex;
}

.main-photo {
  width: 70%;
}

.form {
  width: 30%;
}

.photo-1,
.photo-2 {
  width: 50%;
}

/**
 * Todas as regras especificadas dentro da media query a seguir serão aplicadas
 * para dispositivos de tela menor ou igual a 500px.
 */
@media screen and (max-width: 500px) {
  .row {
    flex-wrap: wrap;
  }
  
  .main-photo,
  .form,
  .photo-1,
  .photo-2 {
    width: 100%;
  }
}
<main class="main">
  <div class="row">
    <section class="main-photo">Foto Principal</section>
    <section class="form">Formulário</section>
  </div>
  <div class="row">
    <section class="photo-1">Foto 1</section>
    <section class="photo-2">Foto 2</section>
  </div>
</main>

Para testar o exemplo acima, clique em Executar, depois em Página Toda e vá diminuindo o tamanho da janela até alcançar 499 pixels ou menos.


Flexbox pode parecer complicado, mas é bem simples. Você só terá que estudar um pouco as suas propriedades. Recomendo alguns guias:

4
  • Fiz conforme orientou. No modo desktop 100% - fica ok. Parabens - Mas se eu variar o tamanho da tela ; (pelo resizer) o formulário e as fotos ficam sobrepondo sobre as imagens da esquerda. No celular deitado, acontece a mesma coisa. No celular em pé, fica normal Commented 3/03/2019 às 3:38
  • Pode criar um Codepen para demonstrar esse comportamento? Commented 3/03/2019 às 3:45
  • Resolvido. Era só deixar as imagens responsivas . Commented 3/03/2019 às 4:20
  • Beleza. Se essa resposta resolveu o seu problema, clique no ✔︎ ao canto superior esquerdo da postagem. Commented 3/03/2019 às 4:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .