I have a problem with the behavior of three buttons that I have next to each other. When the page changes to a smaller size, they continue to maintain that order when what I want is for them to be placed in that case, vertically, that is, one on top of the other. How could I solve this? Below I attach part of the CSS and the code of the buttons.
.myButton {
box-shadow:inset 0px 1px 0px 0px #fff6af;
background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
background-color:#ffec64;
border-radius:6px;
border:1px solid #ffaa22;
display:inline-block;
cursor:pointer;
color:#333333;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffee66;
}
.myButton:hover {
background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
background-color:#ffab23;
}
.myButton:active {
position:relative;
top:1px;
}
.bouncy{
animation:bouncy 5s infinite linear;
position:relative;
}
.bouncy2{
animation:bouncy 3s infinite linear;
position:relative;
}
@keyframes bouncy {
0%{top:0em}
40%{top:0em}
43%{top:-0.9em}
46%{top:0em}
48%{top:-0.4em}
50%{top:0em}
100%{top:0em;}
}
.btn-group .btn {
width: 30%;
}
.btn-group {
width: 100%;
}
<div class="btn-group">
<button class="myButton btn-group btn">Boton1</button>
<button class="myButton bouncy2 btn-group btn">Boton2</button>
<button class="myButton btn-group btn">Boton3</button>
</div>
OPTION 1
The simplest thing in these cases would be:
btn-group
Give the main container that has the class adisplay
with a value offlex
flex-wrap
a valuewrap
that will help us so that if the elements are not in the same row, then they are sent to the next one:OPTION 2
To each button by means of its class we give a width in percentage of 33%
When the space is not enough for the buttons to continue in a row, they will be rearranged in the next one, this is where we indicate the break point by means of a media query; that is, from what measure will there be a readjustment
For this example I took the 700px and told the parent container that:
This would be a way to achieve that:
I would advise you to work on a CSS framework, so you don't reinvent the wheel. In frameworks like bootstrap they have special classes for breakpoints based on screen size. I leave the documentation here and elsewhere.
Bootstrap v4.5
Materialize