1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. FAQ

Мобильное расположение div

Главные вкладки

Аватар пользователя Roamn74 Roamn74 20 марта 2017 в 18:26

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

ВложениеРазмер
Иконка изображения 111.png263.55 КБ

Лучший ответ

Аватар пользователя VasyOK VasyOK 20 марта 2017 в 22:47
1

responsive.tablet.portrait.css

/*Где-то сверху этой конструкции есть медиа-запрос, типа @media... */
.view-dignities .views-row {
 /*строка 49 и после нее добавьте*/
}
/* вот это. можно просто .view-dignities .views-row-3*/
.view-dignities .views-row.views-row-3 {
    clear: left;
}

Допустим, там будет не 4 клетки, а много, тогда:

.view-dignities .views-row:nth-child(2n+1) {
    clear: left;
}

Но это скорей для случаев, когда надо по три и больше в ряд
А если на нечетный вешать, то

.view-dignities . views-row-even {
    clear: left;
}

Комментарии

Аватар пользователя Roamn74 Roamn74 20 марта 2017 в 22:23

Не понял Вас, надо чтоб как на картинке, второй ряд также как первый. А у меня один блок уходит в третий ряд.

Аватар пользователя Roamn74 Roamn74 20 марта 2017 в 22:31

Причем при дальнейшем сжимании или расширении все нормализуется. Заметил, что в одних телефонах отображается вряд, в других 4 блок уходит вниз

Аватар пользователя VasyOK VasyOK 20 марта 2017 в 22:47
1

responsive.tablet.portrait.css

/*Где-то сверху этой конструкции есть медиа-запрос, типа @media... */
.view-dignities .views-row {
 /*строка 49 и после нее добавьте*/
}
/* вот это. можно просто .view-dignities .views-row-3*/
.view-dignities .views-row.views-row-3 {
    clear: left;
}

Допустим, там будет не 4 клетки, а много, тогда:

.view-dignities .views-row:nth-child(2n+1) {
    clear: left;
}

Но это скорей для случаев, когда надо по три и больше в ряд
А если на нечетный вешать, то

.view-dignities . views-row-even {
    clear: left;
}