3

So I tried putting the banner-content-container in the center after using flex-direction:column; in the media query, but it doesn't work. It centers normally but when it gets to the 776px max-width, It doesn't center the div.

Here's my code:

.banner-content-container {
  display: flex;
  justify-content: space-evenly;
  padding-top: 200px;
}

@media screen and (max-width:776px) {
  .banner-content-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="banner-content-container">
    <div class="content contexts1">
      <h3>01. Mobile conductive</h3>
      <p>Smart optimization of RWD design.</p>
    </div>
    <div class="content contexts2">
      <h3>02. User Interface</h3>
      <p>Brilliant UI/UX creative designs.</p>
    </div>
    <div class="content contexts3">
      <h3>03. Affordable</h3>
      <p>Our offers dont break the bank.</p>
    </div>
  </div>
</body>

</html>
AStombaugh
  • 2,930
  • 5
  • 13
  • 31

1 Answers1

1

Changing the flex-direction flips your main axis.

When in row mode, horizontal alignment is achieved via flex-direction and vertical alignment with align-items. In your breakpoint, the opposite is now true.

.banner-content-container {
  display: flex;
  justify-content: space-evenly;
  padding-top: 200px;
}

@media screen and (max-width:776px) {
  .banner-content-container {
    align-items: center;
    flex-direction: column;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="banner-content-container">
    <div class="content contexts1">
      <h3>01. Mobile conductive</h3>
      <p>Smart optimization of RWD design.</p>
    </div>
    <div class="content contexts2">
      <h3>02. User Interface</h3>
      <p>Brilliant UI/UX creative designs.</p>
    </div>
    <div class="content contexts3">
      <h3>03. Affordable</h3>
      <p>Our offers dont break the bank.</p>
    </div>
  </div>
</body>

</html>

Note also that you don't need display: flex within your media query; it's already set in the statement above, media queries don't reset properties.

AStombaugh
  • 2,930
  • 5
  • 13
  • 31
Geat
  • 1,169
  • 6
  • 17
  • Thank you very much, But the items aren't aligned directly under each other. –  Jun 23 '22 at 07:04
  • They're centred based on the width of their content. You'll need to set an equal width on each item to avoid that. – Geat Jun 23 '22 at 13:29