Faire deux div responsive sur une même ligne

Bonjour,

Je souhaite faire quelque chose sur mon site mais je n'y arrive pas.

Je voudrais 2 blocs :
- 1 bloc à gauche avec une image
- 1 bloc à droite avec du texte (le texte doit être centré verticalement/horizontalement dans le bloc).

Le tout doit être responsive.

Voici ce que je cherche à faire et ce que j'obtiens.





Vous pourrez trouver un exemple concret ici : https://labombilla.fr/ (dans la rubrique "bien plus que du maté" sur la home).

Voici le code que j'utilise :

Code CSS :

img.responsive{
   max-width:100%;
   height:auto;
}

div.blochp {
    background : #f4f4f4;
    min-height:300px;
  }

Code HTML :

<div class="row">
 <div class="col-md-6 blochp">
   <img src="xxx.png" class="responsive">
 </div>
 <div class="col-md-6 blochp secondorder">
   <p>Blabla</p>
 </div>
</div>

Merci d'avance pour votre aide

Salut, essaye du côté de flex

.content{
  display: flex;
  flex-direction: row;
}

Modifié par Yanou (12 Aug 2020 - 23:53)

Merci pour ton aide !
Du coup je remplace <div class="row"> par <div class="content"> ?

Non c'était juste un exemple pour t'aider!

Tu utilise bootstrap ?Si oui voici la documentation flex bootstap https://getbootstrap.com/docs/4.0/utilities/flex/

Merci je viens de bidouiller un peu la flexbox mais je reste sur le même problème.

La hauteur de mon bloc div de droite s'adapte à mon texte, il n'est donc pas égal à mon bloc div de gauche (bloc image)

HET a écrit :
Merci je viens de bidouiller un peu la flexbox mais je reste sur le même problème.

La hauteur de mon bloc div de droite s'adapte à mon texte, il n'est donc pas égal à mon bloc div de gauche (bloc image)

Pour le responsive essaye flex-column
Modifié par Yanou (13 Aug 2020 - 00:35)

Le mieux est de coder en mobile first, mais plutôt qu'un long discours : CodePen

<div class="content">
  <div class="first"></div>
  <div class="second">
    <p>Un texte</p>
  </div>
</div>

body {
  margin: 0;
  background-color: #333;
}
.first {
  max-width: 100%;
  height: 100vh;
  background: url("image.jpg") 50% 50%;
  background-size: cover;
}
.second {
  margin: auto;
  font-family: Arial;
  text-align: center;
  color: #777;
}
@media (min-width: 30rem) {
  .content {
    display: flex;
    flex-direction: row;
  }
  .first,
  .second {
    width: 50%;
  }
}

Modifié par Olivier C (13 Aug 2020 - 20:59)

Super Olivier Merci pour ton aide !

De rien. Et si la div de texte n'est pas assez haute sur mobile il suffit de lui assigner un min-height.