Question 43801 in Html Question posted in
Some basic documentation can be found here.

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

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

That is good

But this is bad

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>
Tags:

3

Answers


  1. 0

    You can simply use media query and can change flex-direction property on .Container

    .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;
}

@media screen and (max-width: 480px) {
  .Container {
  flex-direction: column; // This makes the items inside a flex container to 
                             appear in column.
  }
}

    Checkout CSS Flexbox for more understanding.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    You can add a flex-direction: column to your container class when you’re using smaller screens using media queries so they will stack vertically.

    @media (max-width: 600px) {
  .Container {
    flex-direction: column;
  }
}

.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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search