[Решен] Мобильное расположение div

Тип материала: 
Версия Drupal: 
Ключевые слова: 
Форумы: 
Пнд, 20/03/2017 - 15:26

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

0 Спасибо

Лучший ответ

Аватар пользователя VasyOK
4 months 2 дня назад VasyOK #

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
4 months 2 дня назад VasyOK #

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

1 Спасибо
Аватар пользователя Roamn74
4 months 2 дня назад Roamn74 #

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

0 Спасибо
Аватар пользователя Roamn74
4 months 2 дня назад Roamn74 #

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

0 Спасибо
Аватар пользователя fairrandir
4 months 2 дня назад fairrandir #

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

1 Спасибо
Аватар пользователя Roamn74
4 months 2 дня назад Roamn74 #

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

0 Спасибо
Аватар пользователя Roamn74
4 months 2 дня назад Roamn74 #

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

0 Спасибо
Аватар пользователя Roamn74
4 months 2 дня назад Roamn74 #

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

0 Спасибо
Аватар пользователя VasyOK
4 months 2 дня назад VasyOK #

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
4 months 2 дня назад Roamn74 #

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

0 Спасибо
Аватар пользователя Roamn74
4 months 2 дня назад Roamn74 #

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

0 Спасибо