Как сделать кнопки адаптивными и чтобы они перестраивались под экран, а под телефон вставали друг под друга?

Question

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #f0f0f3;
    width: 100vh;
    height: 100vh;
}
body {
    font-family: Montserrat, sans-serif;
  }
   
.container{
    width: 100vh;
    height: 100px;
}
.container h2 {
    font-size: 55px;
    text-align: center;
    margin-top: 10%;
    position: relative;
    left: 50%;
}
.container h2>span {
    font-size: 35px;
    text-align: center;
    margin-top: 10%;
    position: relative;

}
#blink1 {
    -webkit-animation: blink1 5s linear infinite;
    animation: blink1 5s linear infinite;
  }
  @-webkit-keyframes blink1 {
    0% { color: rgb(44, 44, 44); }
    50% { color: rgba(44, 44, 44, 0); }
    100% { color: rgba(44, 44, 44, 1); }
  }
  @keyframes blink1 {
    0% { color: rgba(44, 44, 44, 1); }
    50% { color: rgba(44, 44, 44, 0); }
    100% { color: rgba(44, 44, 44, 1); }
  }

button{
    border: 0px;
}

.button_neumorphism-box, .button_neumorphism-box_2, .button_neumorphism-box_3, .button_neumorphism-box_4, .button_neumorphism-box_5, .button_neumorphism-box_6 {
    width: 150px;
    height: 100px;
    padding: 0;
    border-radius: 30px;
    color: #000;
    box-shadow: 10px 10px 21px #d3d3d6,
               -10px -10px 21px #fff;  
}

button.button_neumorphism-box:hover {
    background-color: #db7a0a;
    color: #f0f0f3;
    transition: 0.5s ease-in-out 0.05s;
}
button.button_neumorphism-box_2:hover {
    background-color: #CC99FC;
    color: #f0f0f3;
    transition: 0.5s ease-in-out 0.05s;
}
button.button_neumorphism-box_3:hover {
    background-color: #818205;
    color: #f0f0f3;
    transition: 0.5s ease-in-out 0.05s;
}
button.button_neumorphism-box_4:hover {
    background-color: #09aec4;
    color: #f0f0f3;
    transition: 0.5s ease-in-out 0.05s;
}
button.button_neumorphism-box_5:hover {
    background-color: #EA3B95;
    color: #f0f0f3;
    transition: 0.5s ease-in-out 0.05s;
}
button.button_neumorphism-box_6:hover {
    background-color: #01b853;
    color: #f0f0f3;
    transition: 0.5s ease-in-out 0.05s;
}
.btn-group{
    position: relative;
    left: 40%;
    top: 30%;
}

<div class="container">
<h2 id="blink1">Добро пожаловать!<br> <span>на портал ЖК услуг</span></h2>
</div>

<div class="btn-group">
<button class="button_neumorphism-box" style="margin-right: 15px;">УК ТСЖ ТСН</button>
<br>
<button class="button_neumorphism-box_2" style="margin-right: 15px;">Поставщик</button>
<br>
<button class="button_neumorphism-box_3" style="margin-right: 15px;">Подрядчик</button>
<br>
<button class="button_neumorphism-box_4" style="margin-right: 15px;">Собственник</button>
<br>
<button class="button_neumorphism-box_5" style="margin-right: 15px;">Застройщик</button>
<br>
<button class="button_neumorphism-box_6" style="margin-right: 15px;">Войти</button>

</div>

Answer 1

Один из вариантов использовать для вырывания flex для отображения на разных устройств media запросы В данном примере используется запрос:

@media (max-width: 568px){ // для устройств с максимальной шириной в 568px применятся стиль 
  .btn-group{
      flex-direction:column; // свойство для отображения в столбец
      }
  }

*{
  margin: 0;
  padding: 0;
  }
body{
  width: 100%;
  height: 100%;
  font-family: Montserrat, sans-serif;
  background-color: #f0f0f3;
  }
.container{
  width:100%;
  }
  .container h2 {
    margin:10% 0;
    position:relative;
    font-size:55px;
    text-align:center;
    }
    .container h2>span {
      margin-top:10%;
      position:relative;
      font-size:35px;
      text-align:center;
      }
#blink1 {
    -webkit-animation: blink1 5s linear infinite;
    animation: blink1 5s linear infinite;
    }
  @-webkit-keyframes blink1 {
    0% { color: rgb(44, 44, 44); }
    50% { color: rgba(44, 44, 44, 0); }
    100% { color: rgba(44, 44, 44, 1); }
    }
  @keyframes blink1 {
    0% { color: rgba(44, 44, 44, 1); }
    50% { color: rgba(44, 44, 44, 0); }
    100% { color: rgba(44, 44, 44, 1); }
    }
.btn-group{
    margin:0 auto;
    display:flex;
    justify-content:center;
    align-items: center;
    position: relative;
    top:40%;
    }
.button_neumorphism-box{
    margin-left:15px;
    padding: 0;
    width: 150px;
    height:90px;
    border:0px;
    border-radius: 30px;
    color: #000;
    box-shadow: 10px 10px 21px #d3d3d6,
               -10px -10px 21px #fff;
    cursor:pointer;
  }
.utton_neumorphism-box_6{
    margin-right:15px;
    }
.button_neumorphism-box_1:hover {
    background-color: #db7a0a;
    color: #f0f0f3;
    transition: 0.5s ease-in-out 0.05s;
}
.button_neumorphism-box_2:hover {
    background-color: #CC99FC;
    color: #f0f0f3;
    transition: 0.5s ease-in-out 0.05s;
}
.button_neumorphism-box_3:hover {
    background-color: #818205;
    color: #f0f0f3;
    transition: 0.5s ease-in-out 0.05s;
}
.button_neumorphism-box_4:hover {
    background-color: #09aec4;
    color: #f0f0f3;
    transition: 0.5s ease-in-out 0.05s;
}
.button_neumorphism-box_5:hover {
    background-color: #EA3B95;
    color: #f0f0f3;
    transition: 0.5s ease-in-out 0.05s;
}
.button_neumorphism-box_6:hover {
    background-color: #01b853;
    color: #f0f0f3;
    transition: 0.5s ease-in-out 0.05s;
}
@media (max-width: 568px){
  .btn-group{
      flex-direction:column;
      }
  }

<div class="container">
  <h2 id="blink1">Добро пожаловать!<br> <span>на портал ЖК услуг</span></h2>
</div>

<div class="btn-group">
  <button class="button_neumorphism-box button_neumorphism-box_1">УК ТСЖ ТСН</button>
  <button class="button_neumorphism-box button_neumorphism-box_2 ">Поставщик</button>
  <button class="button_neumorphism-box button_neumorphism-box_3">Подрядчик</button>
  <button class="button_neumorphism-box button_neumorphism-box_4">Собственник</button>
  <button class="button_neumorphism-box button_neumorphism-box_5">Застройщик</button>
  <button class="button_neumorphism-box button_neumorphism-box_6">Войти</button>
</div>

БЛОГ НА HUSL

Как сделать кнопки адаптивными и чтобы они перестраивались под экран, а под телефон вставали друг под друга?

Ответы (1 шт):