Кнопки неправильно меняют размер при адаптивном веб-дизайне

Question

Размер кнопок на моем веб-сайте изменяется неправильно при переходе на экран меньшего размера.

Они хорошо смотрятся на настольном компьютере. Тем не менее, я пытаюсь сделать так, чтобы сайт выглядел красиво и на мобильных устройствах. Я не уверен, что делать, когда дело доходит до мобильных экранов. Первое изображение - пример того, что происходит, когда размер экрана уменьшается. Второе изображение - это переход, который я ищу. Я новичок в создании сайтов, поэтому любая помощь будет принята с благодарностью!

1 2

 #square-wrapper {

  width: 100%;
  height: 100px;
  text-align: center;
}

#first-square {

  width: 25%;
  min-width: 170px;
  max-width: 100%;
  height: 75px;
  background-color: #e0dbdb;
  border-radius: 5px;
  margin-top: 20px;
  margin-left: 2.450px;
  margin-right: 2.450px;
  margin-bottom: 20px;
  float: left;
  border: 2px solid #23a4de;
  box-shadow: 3px 4px 6px 0px #d8d8d8;
  display: inline-block
}

#second-square {

  width: 25%;
  min-width: 170px;
  max-width: 100%;
  height: 75px;
  background-color: #e0dbdb;
  border-radius: 5px;
  margin-top: 20px;
  margin-left: 2.450px;
  margin-right: 2.450px;
  margin-bottom: 20px;
  float: left;
  border: 2px solid #23a4de;
  box-shadow: 3px 4px 6px 0px #d8d8d8;
  display: inline-block
}

#third-square {

  width: 25%;
  min-width: 170px;
  max-width: 100%;
  height: 75px;
  background-color: #e0dbdb;
  border-radius: 5px;
  margin-top: 20px;
  margin-left: 2.450px;
  margin-right: 2.450px;
  margin-bottom: 20px;
  float: left;
  border: 2px solid #23a4de;
  box-shadow: 3px 4px 6px 0px #d8d8d8;
  display: inline-block
}

  <div id="square-wrapper">


  <div id="first-square">
    <a="" href="/pages/order-lookup">
      <div id="track-order-box" class="half-box"><span>Button 1</span>
        <img src=""></a>


      </div>
  </div>


  <div id="second-square">

    <a="" href="/pages/order-lookup">
      <div id="track-order-box" class="half-box"><span>Button 2</span>
        <img src=""></a>


      </div>
  </div>


  <div id="third-square">

    <a="" href="/pages/order-lookup">
      <div id="track-order-box" class="half-box"><span>Button 3</span>
        <img src=""></a>


      </div>
   </div>

 </div>

Answer 1

Здравствуйте, это решение, основная идея в том, что вам нужны медиа-запросы, которые запускаются, когда размер экрана ниже определенного порога. Для получения дополнительной информации здесь есть ссылка , которая четко объясняет, что вам нужно сделать.

 #square-wrapper {

  width: 100%;
  height: 100px;
  text-align: center;
}

#first-square {

  width: 25%;
  min-width: 170px;
  max-width: 100%;
  height: 75px;
  background-color: #e0dbdb;
  border-radius: 5px;
  margin-top: 20px;
  margin-left: 2.450px;
  margin-right: 2.450px;
  margin-bottom: 20px;
  float: left;
  border: 2px solid #23a4de;
  box-shadow: 3px 4px 6px 0px #d8d8d8;
  display: inline-block
}

#second-square {

  width: 25%;
  min-width: 170px;
  max-width: 100%;
  height: 75px;
  background-color: #e0dbdb;
  border-radius: 5px;
  margin-top: 20px;
  margin-left: 2.450px;
  margin-right: 2.450px;
  margin-bottom: 20px;
  float: left;
  border: 2px solid #23a4de;
  box-shadow: 3px 4px 6px 0px #d8d8d8;
  display: inline-block
}

#third-square {

  width: 25%;
  min-width: 170px;
  max-width: 100%;
  height: 75px;
  background-color: #e0dbdb;
  border-radius: 5px;
  margin-top: 20px;
  margin-left: 2.450px;
  margin-right: 2.450px;
  margin-bottom: 20px;
  float: left;
  border: 2px solid #23a4de;
  box-shadow: 3px 4px 6px 0px #d8d8d8;
  display: inline-block
}

@media only screen and (max-width: 600px) {
 
 #first-square {
   width: 100%;
 }
 
 #third-square{
  width:48%;
  margin:0 0 0 1%;
  padding:0;
 }
 
 #second-square{
  width:48%;
  margin: 0 1% 0 0;
  padding:0;
 }
 }

 @media only screen and (max-width: 400px) {
 
#first-square {
  width: 30%;
  margin: 10px 30% 0 30%;
}
 
#third-square{
  width:30%;
  margin: 10px 30% 0 30%;
}
 
#second-square{
 width:30%;
 margin: 10px 30% 0 30%;
   }
  }

  <div id="square-wrapper">


  <div id="first-square">
    <a="" href="/pages/order-lookup">
      <div id="track-order-box" class="half-box"><span>Button 1</span>
        <img src=""></a>


      </div>
  </div>


  <div id="second-square">

    <a="" href="/pages/order-lookup">
      <div id="track-order-box" class="half-box"><span>Button 2</span>
        <img src=""></a>


      </div>
  </div>


  <div id="third-square">

    <a="" href="/pages/order-lookup">
      <div id="track-order-box" class="half-box"><span>Button 3</span>
        <img src=""></a>


      </div>
   </div>

 </div>

Answer 2

Есть много вещей, которые нужно распаковать, множество основных синтаксических ошибок, которые сбивают вас с толку. Например: <a="" не является правильным HTML.

У вас также есть перекрывающиеся теги, например:

<div> <a> </div> </a>

Это не верный html.

Вы можете иметь:

<div> <a> </a> </div>

или

<a> <div> </div> </a>

Причина, по которой ваш вопрос получил отрицательное голосование, состоит в том, что люди довольно злобны по поводу переполнения стека, любой вопрос, у которого нет однозначного ответа, обычно быстро сбивается. Если вы новичок, то знать, какие вопросы задавать, может быть очень сложно, не зная основ.

Я бы действительно рекомендовал пройти онлайн-курсы по html, css и javascript. Основы. Однажды он просто щелкнет, и вы обнаружите, что вы можете узнать вещи очень быстро. Даже профессиональные программисты тратят половину своего времени на копирование и вставку вещей, которые они нашли в Google, так что знание того, как задать вопрос, на самом деле является большой частью этого. Надеюсь, это поможет вообще.