Сложности в укладке элементов с изменением размера экрана - PullRequest
Новая
       8

Сложности в укладке элементов с изменением размера экрана

0 голосов
/ 23 апреля 2020

У меня возникают трудности с наложением моих div'ов рядом друг с другом, когда размер экрана меньше, а затем я их накладываю друг на друга, как только я достигну размера телефона.

Я использую Foldy Grids от Paravel, On full Размер рабочего стола, есть 3 деления, которые находятся рядом, но я хочу, чтобы это уменьшилось до 2 рядом, а затем на телефоне, только 1 друг над другом. Однако я чувствую, что применяю медиазапросы к неправильным <div>. Любое руководство будет высоко ценится. Внутри CSS причина, по которой я добавил 33%, заключается в том, что в режиме полного рабочего стола деления делятся на 3.

CSS: 

@media screen and (max-width: 900px) {
  .dashboardIconsMod {
    width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .dashboardIconsMod {
    width: 100%;
  }
}

.dashboardIconsMod {
    color: pink;
    border-style: solid; 
    border-color: red;
}

HTML: 

<section id="content">
  <div class="container">
    <section id="grid" class="clearfix">
      <div class="cf show-grid">
        <div class="row">
          <div class="grid-2 dashboardIconsMod">
            <!-- 1st Div -->
            <p> 1st Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 2nd Div -->
            <p> 2nd Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 3rd Div -->
            <p> 3rd Grid </p>
          </div>
        </div>


        <div class="row">
          <div class="grid-2 dashboardIconsMod">
            <!-- 4th Div -->
            <p> 4th Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 5th Div -->
            <p> 5th Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 6th Div -->
            <p> 6th Grid </p>
          </div>
        </div>

      </div>
    </section>
  </div>
</section>

1 Ответ

1 голос
/ 23 апреля 2020

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

На данный момент на рабочем столе 3 элемента, на меньших экранах, таких как iPad, есть 2 элемента, а на меньшем экране ниже 600 пикселей есть один элемент. 

.dashboardIconsMod {
    color: pink;
    border-style: solid; 
    border-color: red;
    width:33.33%;
}
* {box-sizing: border-box;}
.show-grid .row {display:flex; flex-wrap: wrap;}
@media screen and (max-width: 900px) {
  .dashboardIconsMod {
    width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .dashboardIconsMod {
    width: 100%;
  }
}
<section id="content">
  <div class="container">
    <section id="grid" class="clearfix">
      <div class="cf show-grid">
        <div class="row">
          <div class="grid-2 dashboardIconsMod">
            <!-- 1st Div -->
            <p> 1st Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 2nd Div -->
            <p> 2nd Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 3rd Div -->
            <p> 3rd Grid </p>
          </div>
        </div>


        <div class="row">
          <div class="grid-2 dashboardIconsMod">
            <!-- 4th Div -->
            <p> 4th Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 5th Div -->
            <p> 5th Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 6th Div -->
            <p> 6th Grid </p>
          </div>
        </div>

      </div>
    </section>
  </div>
</section>
...