Как сделать так, чтобы button кнопки не залазили друг на друга при разном уменьшении экрана?
Вот код, который я написал:
<html>
<div class="main_content" style="position: relative; left: 15px;">
<a href="" class="average_buttons" id="hidden_donate"><b style="margin-top: 7px;">Донат услуги</b></a>
<a href="" class="average_buttons2" id="hidden_donate2"><b style="margin-top: 7px;">Валюта</b></a>
<a href="" class="average_buttons3" id="hidden_donate3"><b style="margin-top: 7px;">Прочие услуги</b></a>
</div>
</html>
<style>
.average_buttons {
font-size: 20px;
background-color: #f5b759;
color: white;
width: 20%;
height: 40px;
text-decoration: none;
border-radius: 10px;
text-align: center;
display: flex;
justify-content: center;
margin: 20px;
position: absolute;
left: 0;
}
.average_buttons2 {
font-size: 20px;
background-color: #fcd292;
color: white;
width: 20%;
height: 40px;
text-decoration: none;
border-radius: 10px;
text-align: center;
display: flex;
justify-content: center;
margin: 20px;
margin-left: 30px;
position: absolute;
left: 300px;
}
.average_buttons3 {
font-size: 20px;
background-color: #fcd292;
color: white;
width: 20%;
height: 40px;
text-decoration: none;
border-radius: 10px;
text-align: center;
display: flex;
justify-content: center;
margin: 20px;
margin-left: 285px;
position: absolute;
left: 350px;
}
@media (max-width: 768px) {
.average_buttons {
font-size: 20px;
background-color: #f5b759;
color: white;
width: 25%;
height: 40px;
text-decoration: none;
border-radius: 10px;
text-align: center;
display: flex;
justify-content: center;
margin: 20px;
position: absolute;
left: 0;
}
.average_buttons2 {
font-size: 20px;
background-color: #fcd292;
color: white;
width: 25%;
height: 40px;
text-decoration: none;
border-radius: 10px;
text-align: center;
display: flex;
justify-content: center;
margin: 20px;
margin-left: 20px;
position: absolute;
left: 320px;
}
.average_buttons3 {
font-size: 20px;
background-color: #fcd292;
color: white;
width: 30%;
height: 40px;
text-decoration: none;
border-radius: 10px;
text-align: center;
display: flex;
justify-content: center;
margin: 20px;
margin-left: 20px;
position: absolute;
left: 630px;
}
}
@media (min-width: 1120px) {
.average_buttons {
font-size: 20px;
background-color: #f5b759;
color: white;
width: 22%;
height: 40px;
text-decoration: none;
border-radius: 10px;
text-align: center;
display: flex;
justify-content: center;
margin: 20px;
position: absolute;
left: 0;
}
.average_buttons2 {
font-size: 20px;
background-color: #fcd292;
color: white;
width: 22%;
height: 40px;
text-decoration: none;
border-radius: 10px;
text-align: center;
display: flex;
justify-content: center;
margin: 20px;
margin-left: 30px;
position: absolute;
left: 320px;
}
.average_buttons3 {
font-size: 20px;
background-color: #fcd292;
color: white;
width: 22%;
height: 40px;
text-decoration: none;
border-radius: 10px;
text-align: center;
display: flex;
justify-content: center;
margin: 20px;
margin-left: 285px;
position: absolute;
left: 400px;
}
}
</style>
