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

Buttons overflow in HTML/CSS

I have an issue where buttons overflow from the container. I added width: 100% to the button but nothing helped.

body{
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: lightgray;
}

.container {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 35px;
    width: 500px;
    padding: 60px;
    background: #fff;
    border: 2px solid #DBDBDB;
    border-radius: 20px;
}



.socialLogin {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.socialLogin > button {
    padding: 10px 70px;
}
<div class="container">
    <div class="socialLogin">
        <button><a href="#"><img src="./assets/apple.png"></a></button>
        <button><a href="#"><img src="./assets/facebook.png"></a></button>
        <button><a href="#"><img src="./assets/google.png"></a></button>
    </div>
</div>

enter image description here

Tags:

2

Answers


  1. 0

    You are setting the width on the container class. Remove it and it will work.

    Login or Signup to reply.
  2. 0

    Hey will you tell me you want the buttons vertical or horizontal

    you can use flex-wrap to wrap your buttons in the available space.

    see this code and try to learn from it

    body {
  align-items: center;
  justify-content: center;
  background: lightgray;
}

.container {
  width: 60%;
  margin: auto;
  gap: 35px;
  padding: 30px 20px;
  background: #fff;
  border: 2px solid #DBDBDB;
  border-radius: 20px;
}

.socialLogin {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.socialLogin>button {
  padding: 10px 10dvw;
}
    <div class="container">
      <div class="socialLogin">
          <button><a href="#"><img src="./assets/apple.png"></a></button>
          <button><a href="#"><img src="./assets/facebook.png"></a></button>
          <button><a href="#"><img src="./assets/google.png"></a></button>
      </div>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search