Блог

Только начал использовать W3.css, и все же не нашел решения для крошечной проблемы, которая, похоже, появляется только в мобильной версии.

Итак, создан адаптивный контейнер — строка с 4 ячейками разной ширины в нем. Когда мой телефон находится в портретном режиме, он загружает сайт, как и предполагалось. Но когда я переворачиваю его в альбомную ориентацию — только этот контейнер с 4 ячейками — возвращается в экранную версию «large / medium» — ячейки выстроены рядом друг с другом, а не вертикально … (прикрепленное изображение, чтобы было понятно).

Портретный режим — работает нормально

Ландшафтный режим — только этот контейнер использует другую ширину

Вернуться к портрету из альбомной ориентации — та же проблема

Есть какие-нибудь советы по этому поводу?

 <div class="w3-cell-row" style="width: 100%; background: #2D9595; padding-left: 3%; padding-right: 3%;">
  
  <div class="w3-container w3-cell w3-mobile" style="padding: 3%">
  </div>
  
  <div class="w3-container w3-cell w3-mobile" style="padding: 3%">
  </div>
  
  <div class="w3-container w3-cell w3-mobile" style="padding: 3%">
  </div>
  
  <div class="w3-container w3-cell w3-mobile" style="padding: 3%">
  </div>
</div>  

Спасибо

Согласно документации w3.css:

Адаптивный макет

Класс w3-mobile добавляет к любому элементу HTML возможность быстрого реагирования на мобильные устройства.

При использовании вместе с w3-cell столбцы макета будут отображаться вертикально на маленьких экранах / мобильных телефонах и горизонтально на средних / больших экранах.

Итак, это работает так, как ожидалось.

С другой стороны, «разная ширина» используется в обоих режимах (книжный и альбомный), и проблема, похоже, устранена, удалив отступы (3% , слева и справа) div с классом «w3-cell-row».

После тестирования я предполагаю, что CSS display: table; может пересчитывать и регулировать ширину при повороте. Чтобы все было согласовано, попробуйте применить ширину в процентах к каждому .w3-cell-row , что должно влиять только на 600 пикселей и ниже.

 .w3-cell-row {
    width: 100%;
    padding: 0 3%;
    background: #2D9595;
}
.w3-cell-row .w3-container {
    padding: 3%;
    /* table-layout: fixed; */
}
.w3-cell-row .w3-container:nth-child(1) {
    background-color: pink;
    width: 30%;
}
.w3-cell-row .w3-container:nth-child(2) {
    background-color: green;
    width: 40%;
}
.w3-cell-row .w3-container:nth-child(3) {
    background-color: blue;
    width: 15%;
}
.w3-cell-row .w3-container:nth-child(4) {
    background-color: orange;
    width: 15%;
}  

 <div class="w3-cell-row">

    <div class="w3-container w3-cell w3-mobile">
        adipisicing elit. Rerum
    </div>

    <div class="w3-container w3-cell w3-mobile">
        consectetur adipisicing
    </div>

    <div class="w3-container w3-cell w3-mobile">
        Lorem ipsum dolor sit amet
    </div>

    <div class="w3-container w3-cell w3-mobile">
        Eos, aut?
    </div>
</div>