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

Аватар пользователя Roamn74

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

ВложениеРазмер
Иконка изображения 111.png263.55 КБ
Ключевые слова:
Тип материала:
Версия Drupal:
Форумы:
0 Спасибо

Лучший ответ

Аватар пользователя VasyOK
VasyOK 6 месяцев назад

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;
}
0 Спасибо

Комментарии

Аватар пользователя VasyOK
VasyOK 6 месяцев назад 1

Какой сайт и как надо?

Аватар пользователя Roamn74
Roamn74 6 месяцев назад

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

0 Спасибо
Аватар пользователя Roamn74
Roamn74 6 месяцев назад

Я это понимаю. Не могу разобраться в конкретном примере.

0 Спасибо
Аватар пользователя fairrandir
fairrandir 6 месяцев назад 1

Нет. Не понимаете. clear: left третьему элементу. А лучше - нечётным.

Аватар пользователя Roamn74
Roamn74 6 месяцев назад

Спасибо за ссылку буду изучать

0 Спасибо
Аватар пользователя Roamn74
Roamn74 6 месяцев назад

Посмотрите сайт http://gostlift.ru/ при сжимании на размерах от 768px до 675px.

0 Спасибо
Аватар пользователя Roamn74
Roamn74 6 месяцев назад

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

0 Спасибо
Аватар пользователя VasyOK
VasyOK 6 месяцев назад

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;
}
0 Спасибо
Аватар пользователя Roamn74
Roamn74 6 месяцев назад

Сейчас попробую

0 Спасибо
Аватар пользователя Roamn74
Roamn74 6 месяцев назад

Спасибо VasyOK #, за подробное изложение. Все заработало. :)

0 Спасибо