как добавить отзывчивые кнопки для мобильного? кнопки должны складываться в столбец. С трудом

Question

Мой контент должен реагировать на все размеры экрана, и я почти у цели. кнопки должны складываться в аккуратный столбец, но что-то мешает этому произойти. Пожалуйста, помогите предложить идею, как я могу это исправить. Смотрите работу до сих пор. Заранее спасибо, и я ценю любую помощь по этому topi c. С уважением

Answer 1

Появляется @media all, что требовалось для реагирования на кнопки, использующие это CSS.

 @media all and (max-width: 800px) {
     #main>.row,
     #main.article {
         /* Return them to document order */
         -webkit-order: 0;
         order: 0;
         display: flex;
     }
 }

Answer 2

Я видел ваш вопрос, поэтому я сделал ответ на ваш вопрос.

, поэтому я просто даю код стилей sh раскрывающийся список и кнопку.

html код

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
  <a href="#">wood type</a>
  <a href="#">news</a>
  <a href="#">specification</a>
    <a href="#">pricing</a>
    <a href="#">images</a>
    <a href="#">faqs</a>
  </div>
</div>

и css

.dropdown {
  position: relative;
  display: inline;

}

    .dropbtn {
  background-color: yellow;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
      width: 17.82%;
      margin: 0px 4px;
}

    .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 620px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

    .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: inline;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: inline;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}