Как задать ширину блока на мелких экранах?

Question

[Влад Серов]

Блог на WordPress с магазином Woocomerc. Страница с категориями товаров состоит из трех товаров в ряд.
Когда страница ужимается (на мобильных устройствах) товары налазят друг на друга.
Как сделать что бы товары просто переносились на новую строку?
Не помещается три? - один значит падает ниже.
По умолчанию стоит значение width - 30% .
Если ставить 100, то на мелких экранах работает отлично (один товар в ряд)
Может можно обозначить что если разрешеие менее 900 в ширину то размер блока 100%?

Answer 1

[Сергей Петроченко]

в теге head пропишите

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

а в css пишите медиа запросы

@media only screen and (min-width: 481px) and (max-width: 769px) {
здесь пишите стили которые будут применяться в рамках нужных брейкпоинтов
}

Смотрите в эту сторону

Answer 2

[Евгений Перин]

habrahabr.ru/company/google/blog/173861