Блог

Привет, здесь впервые постер!

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

Вот изображение раздела, который я пытаюсь свернуть

           <section id="prices" classes="bg-light">
        <div class="container">
          <h2 id="pricing-header">Our Rates<span class="text-primary"></span></h2>
          <div class="boxes">
            <div class="box">
                <h3 id="price-Heading">Basic</h3>
                <div class="icon-title">
                  <li> $50 </li>
                </div>
                <div class="icon-title">
                  <li> 1 page </li>
                </div>
                <div class="icon-title">
                  <li> 1 page </li>
                </div>
                <div class="icon-title">
                  <li> 1 page </li>
              </div>
              <div class="icon-title">
                <li> 1 page </li>
              </div>
              <div class="icon-title">
                <li> $50 </li>
              </div>
                <li class="icon-title"> $50 </li>
              </div>

          <div link class="box">
            <h3 id="price-Heading">Standard</h3>
            <div class="icon-title">
              <li> $100 </li>
            </div>
            <div class="icon-title">
              <li> $50 </li>
            </div>
            <div class="icon-title">
              <li> $50 </li>
            </div>
            <div class="icon-title">
              <li> $50 </li>
            </div>
            <div class="icon-title">
              <li> $50 </li>
            </div>
            <div class="icon-title">
              <li> $50 </li>
            </div>
              <li class="icon-title"> $50 </li>
            </div>

            <div link class="box">
              <h3 id="price-Heading">Premuim</h3>
              <div class="icon-title">
                <li>$250</li>
              </div>
              <div class="icon-title">
                <li> $50 </li>
              </div>
              <div class="icon-title">
                <li> $50 </li>
              </div>
                <li class="icon-title"> $50 </li>
              </div>

        </div> <!-- boxes ending -->
      </section>

      <!-- Pricing section Ends Here -->
  

Похоже, вы хотите разместить свои разделы на мобильном устройстве. Этого можно очень легко достичь с помощью flex-box, который широко поддерживается в браузерах. Просто измените способ обоснования содержимого и направление сгибания в мобильном запросе.

 
<style>
  .flex {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
  }

  .section {
    border: 1px solid;
    height: 20rem;
    width: 20%;
    min-width: 10rem;
  }

  @media only screen and (max-width: 500px) {
    .flex {
      flex-direction: column;
      align-items: center;
    }
  }
</style>

<div class="flex">
  <div class="section">
    Section one.
  </div>
  <div class="section">
    Section two.
  </div>
  <div class="section">
    Section three.
  </div>
</div>
  

flex-direction выберет, отображается ли он в строке или в виде столбцов. Затем Justify-content выберет расположение элементов внутри. Конечно, в идеальном сценарии эти стили были бы в отдельном файле 🙂