How do I make mu buttons shrink with screen size?

Question

My JavaScript code has generated buttons based on contents in a JSON file. Using the display grid structure, I have managed to get it into a format with a max of 2 buttons per row. However, after I did that, there seems to be a styling issue as the bigger buttons go off the screen. How do I make it so that as the screen shrinks the buttons are still visible but potentially smaller. Here is my CSS code:

.answers{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0px 0px
  grid-column-gap: 10px;
  grid-template-rows: auto;
  text-align: center;
  grid-auto-flow: row;
	overflow: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I have tried seeing if there is a margin issue but there isn't. As well as this, I would like to centered the container which holds the answer to the middle. Could anyone suggest a method forward of shrinking the button size but still being able to see the label/text within, whatever the size.

Answer 1

This would usually be accomplished with CSS media rules Here's an example of what that might look like:

.button { width: 50px; }

@media(max-width:500px) {
  .button { width: 30px; }
}

In this example the element would be 50px, but when the viewport width shrinks below 500px, the width would change to 30px.

This is just a simple example with a width element, but the idea is that you figure out how your CSS needs to change when the screen gets to a certain point, and then you add whatever those CSS rules are to the @media rule section. For example, changing margins or padding, or transitioning from a flex-direction of row to column, etc.