Keep buttons the same size when one button is different from the others

HTML & CSS
1

What would I do here?

https://jsfiddle.net/gsy9dm5w/

.modalA {
  display: flex;
  /*z-index: 3;*/
}

.modal-content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  /* added*/
  min-height: 100%;
  margin: auto;
  justify-content: center;
  align-content: center;
}

.buttonContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  max-width: 398px;
  gap: 10px;
  /*background: red;*/
}

.playButton {
  flex-basis: 126px;
  /* width of each button */
  margin: 0px;
  /* spacing between buttons */
  cursor: pointer;
}

.btn-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #0d6efd;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 16px;
  border-radius: 4px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn:hover {
  background-color: #0056b3;
  color: #ffffff;
}

.btn:focus {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
  box-shadow: 0 0 0 4px rgb(0 128 0 / 100%);
}


.btnq {
  -webkit-appearance: none;
  appearance: none;

  height: 126px;
  width: 126px;
  

  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

.exitB {
  position: relative;
  margin: 10px auto 0;
  /*  position: absolute;*/
  inset: 0 0 0 0;
  /*z-index: 0;*/
  /*margin: auto auto 0;*/
  /*top: 0px;
  bottom: -1px;
  margin: auto;
  right: 0;
  left: 0;*/
  /*margin: 10px auto 0;*/


  width: 47px;
  height: 47px;
  background: black;
  border-radius: 50%;
  border: 5px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  /*margin: auto;*/
}

2

If I wanted to place it in the middle,

https://jsfiddle.net/jbo6mLu2/1/

How would I do that without the other buttons changing their size?

3

On buttonContainer use align-items:center otherwise the default is to stretch.

1 Like
4

Can that red padding be removed? https://jsfiddle.net/4mpL9x83/3/

5

Yes but then the 3 middle buttons will not line up with the ones above and below because the one in the center will be smaller.

Its the flex-basis:126px that holds the button wide so you can change it to match your svg at 80px and then remove padding from the button also.

.btnq {
  -webkit-appearance: none;
  appearance: none;

  height: 80px;
  width: 80px;
flex-basis:80px;
padding:0;
  background: red;
  color: inherit;
  border: none;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

As mentioned they won’t line up in a grid as this is flex.

1 Like
6

Maybe, placing buttons in a grid won’t work?

That or, I am not writing the code correctly.

How would I center the middle button?

And, how do you add wrap to buttons when it is a grid?

https://jsfiddle.net/c6jo3t9m/4/

Assuming I am doing this right.

Would I be using auto-fit or auto-fill here?

.modalA {
  display: grid;
  /*z-index: 3;*/
}

.modal-content {
  display: grid;
  grid-template-rows: auto;
  /* added*/
  min-height: 100%;
  margin: auto;
  justify-items: center;
  align-content: center;
}

.buttonContainer {
  display: grid;
  grid-template-columns: repeat(3, 172px);
  grid-gap: 0;
  align-content: center;
  align-items: center;
  justify-content: center;
  max-width: 398px;
  gap: 10px;
  /*background: red;*/
}

9

margin:auto on buttonq should do it.

1 Like
10

How do I make the buttons wrap?

https://jsfiddle.net/5qx163wo/

11

I assumed you didn’t want them to wrap as you have a fixed size for the buttons and also how can that pattern be maintained with the question button in the middle if it wraps?

You could make the buttons shrink instead using a percentage width on them. Otherwise you’d need a media query at an appropriate point to change the grid setting to two across.

Or instead go back to your flex example but you’d need buttonq in a div as you didn’t want the button itself to stretch.

12

How would I use queries as an example?

13

Well you know that the scrollbar will kick in at the width of the three buttons plus the padding/gaps etc. so set your max width media query at that point.

Then change the rule for the grid inside that media query where you set three across and change it to two. You don’t need to repeat the whole rule just the changes to the original

Have a go yourself. :slight_smile:

14

My attempt: https://jsfiddle.net/Lx69uk2r/2/

.buttonContainer {
  display: grid;
  grid-template-columns: repeat(3, 172px);
  grid-gap: 0;
  align-content: center;
  align-items: center;
  justify-content: center;
  max-width: 536px;
  gap: 10px;
  background: red;
}

@media (max-width: 536px) {
  .buttonContainer {
    grid-template-columns: repeat(3, 172px);
  }
}
15

You didn’t change anything?

It should be repeat 2 not 3?

@media (max-width: 536px) {
  .buttonContainer {
    grid-template-columns: repeat(2, 172px);
  }
}
1 Like
16

Like this then: https://jsfiddle.net/9r70cf1k/2/

@media (max-width: 536px) {
  .buttonContainer {
    grid-template-columns: repeat(2, 172px);
  }
}

@media (max-width: 172px) {
  .buttonContainer {
    grid-template-columns: repeat(1, 172px);
  }
}
1 Like