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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.