Can I make the button appear on a new line when the screen is too small? HTML, CSS

Question

Can I change the buttons that the second button goes into another 'line' when the sreen is too small in HTML? look:

I want the Join a lobby button in the second picture to break into a new line. Here's my HTML code

.Container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.ModeButton {
  color: #ffffff;
  background: linear-gradient(90deg, #65F78C 0%, #54E051 35%, #96FC5B 100%);
  border: 0px;
  font-size: 30px;
  border-radius: 15px;
  font-family: 'M PLUS 1p', sans-serif;
  width: 500px;
  height: 350px;
  opacity: 1;
  transition: color, opacity 0.3s linear 0s;
}

<div class="Container">
  <button type="button" class="ModeButton">
    Create a new lobby
    <br>
    <br>
    <img src="images/Create.png">
  </button>
  <button type="button" class="ModeButton">
    Join a lobby
    <br>
    <br>
    <img src="images/Join.png">
  </button>
</div>

Answer 1

Use flex-wrap with flex-basis value for wrapping

flexbox supports a natural wrapping behavior, which allows the flex items to wrap as needed when the content area become smaller. You might want to use a flex-basis value for preferred base width for your flex children.

See the example snippet below.

.Container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

.ModeButton {
  color: #ffffff;
  background: linear-gradient(90deg, #65F78C 0%, #54E051 35%, #96FC5B 100%);
  border: 0px;
  font-size: 30px;
  border-radius: 15px;
  font-family: 'M PLUS 1p', sans-serif;
  width: 500px;
  height: 350px;
  opacity: 1;
  transition: color, opacity 0.3s linear 0s;
  flex-basis: 250px; /* adjust this value for your preference */
}

<div class="Container">
  <button type="button" class="ModeButton">
    Create a new lobby
    <br>
    <br>
    <img src="images/Create.png">
  </button>
  <button type="button" class="ModeButton">
    Join a lobby
    <br>
    <br>
    <img src="images/Join.png">
  </button>
</div>