How to turn flex-direction from row to column when device width is shrinkes(HTML)-CodePudding

I am searching for ways to convert my three cards that are standing in a row on the laptop screen to turn into a column view on the mobile screen. Unfortunately, I don't quite know how to execute this.

When on the laptop screen three cards look normal When on the mobile screen the three cards exceed the width of the general website borders.

CodePudding user response：

Here is a basic demonstration using media-queries. Essentially just choose a specified width on where you want the flex-direction to change, then set it to flex-direction: column;.

View the full page and resize the snippet to see it work.

.flex-parent {
  display: flex;
  justify-content: space-evenly;
}

.flex-item {
  font-size: 4em;
}

.flex-parent > .flex-item:nth-child(2) {
  color: hotpink;
}

@media only screen and (max-width: 800px) {
  .flex-parent {
    flex-direction: column;
    align-items: center;
  }
}

<div >
  <div >
    <p>hello world</p>
  </div>
  <div >
    <p>hello world</p>
  </div>
</div>

CodePudding user response：

By default the flex-direction is row. All you need to do is make flex-direction: column inside the @media rule only for mobile devices. Like that.

@media screen and (max-width: 600px){
   .your-class-name{
      flex-direction: column;
   }
}