'html css responsive design several buttons middle 4/0 or 2/2 but no 3/1

I currently have made my buttons like so (I've taken off the useless stuff to reproduce the problem):

CSS:

    .containerWelcome{
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .buttonsWelcome {
        width: 200px;
    }
    .disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

HTML:

        <div class="containerWelcome">
            <button name="button1" onclick="location.href=something0"
                    class="buttonsWelcome" type="submit"
                    value="something0">something0
            </button>
            <button name="button2" onclick="location.href=something"
                    class="buttonsWelcome" type="submit"
                    value="something">something
            </button>
            <button name="button3" onclick=""
                    class="buttonsWelcome disabled" type="submit"
                    value="somethingelse0">somethingelse0
            </button>
            <button name="button4" onclick=""
                    class="buttonsWelcome disabled" type="submit"
                    value="somethingelse1">somethingelse1
            </button>
        </div>

And if I don't zoom in, I have the four buttons next to each other. Which is good. enter image description here If I zoom in a little bit or if I'm on another smaller laptop I have 3 buttons and one below them. Which is sort of ugly. enter image description here If I zoom even more, I have 2 buttons on top of 2 others one. Which is good. Except, they're not perfectly centered, which is a bit weird. I guess that's because they're at the left of the container? enter image description here

My main issue is: I would like to go from 4 buttons to 2 on top of the center container and 2 at the bottom of the center container WITHOUT having the awkard stage where there are 3 buttons on top of the center container and one at the botton of the center container.

I also am looking for a way to center the buttons in the center of the container, but that's less important I guess.

htmlcssresponsive-design


Solution 1:[1]

try this code:

.containerWelcome{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display:flex;
  
}
.buttonsWelcome {
  width: 200px;
}

@media only screen and (max-width: 600px)  {
  .containerWelcome{
     flex-wrap: wrap;
  }

  .buttonsWelcome {
    flex: 50%;
  }
}

Solution 2:[2]

the easiest way is to just use display flex, don't worry it's to simple to learn, check the solution below and replace your .containerWelcome style with it.

.containerWelcome {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 410px;
  margin-inline: auto;
  gap: 5px;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mahmoud
Solution 2 Karim Elnemr

Related Questions