Change img position when I change window size

user_18431516 0
Viewed 48

I'm trying to create a website in css / html.

I've a pic in my section, and text next to it. I wanted to make my pic above the text when the window size is under 1300 px.

I've tried to play with width/display/flex but it doesn't work. Any ideas?

HTML part:

<section class="who" id="who">
  <div class="max-width">
    <h2 class="title"> Qui suis-je ? </h2>
    <div class="who-content">
      <div class="column left">
        <img src="Profil1.jpeg" alt="">
      </div>
      <div class="column right">
        <div class="text">
          <p>Lorem</p>
          <a href="#"><i class="fa-solid fa-file-code">   C.V   </i></a>
        </div>
      </div>
    </div>
  </div>
</section>

CSS part:

@media(max-width:1300px){
  .max-width{
    margin-left: 0px;
    max-width: 800px;
  }
  .who .who-content .left img{
    height: 350px;
    width: 350px;
  }
  .who .who-content .column{
    width: 100%;
  }
        
  .who .who-content .left{
    display: flex;
    justify-content: center;
    margin: 0 auto 60px;
  }
  .who .who-content .right{
    flex:100%;
  }
}
css image html
2 Answers

Using flex in CSS, you can set the flex-flow to column in your media query so that the text goes below the image as intended. But you want to set the display: flex and flex-flow: column properties on a parent element, such as the section tag I used in the code below:

.who-content {
  display: flex;
}

@media(max-width:1300px) {
  .max-width {
    margin-left: 0px;
    max-width: 800px;
  }
  .who-content {
    flex-flow: column;
  }
  .who .who-content .left img {
    height: 350px;
    width: 350px;
  }
  .who .who-content .column {
    width: 100%;
  }
  .who .who-content .left {
    justify-content: center;
    margin: 0 auto 60px;
  }
  .who .who-content .right {
    flex: 100%;
  }
}
<section class="who">
  <div class="max-width">
    <h2 class="title"> Qui suis-je ? </h2>
    <div class="who-content">
      <div class="column left">
        <img src="Profil1.jpeg" alt="">
      </div>
      <div class="column right">
        <div class="text">
          <p>Lorem </p>
          <a href="#"><i class="fa-solid fa-file-code">   C.V    </i></a>
        </div>
      </div>
    </div>
  </div>
</section>

user_75038870

try this:

/*here goes the code for when its above 1300px*/


@media screen and (max-width: 1300px) {
    /*here goes the code for when its under 1300 pixels*/
}
user_183811850
Related