Форум Сайтостроение Веб-строительство

Wordpress - на мобильном плашки с товарами в две колонки...

wilelf
На сайте с 27.06.2005
Offline
322
wilelf
1200

Друзья, подскажите, как на этом сайте http://iso-dom.ru/ сделать, чтобы на айфонах всяких плашки с превью товаров были в 1 колонку, а не в 2, как сейчас?

Агентство контекстной рекламы НеВсем ( https://www.nevsem.ru/ ) Пишу платно статьи для Хабра. Мой профиль ( https://habr.com/ru/users/wilelf/ )
V
На сайте с 25.02.2013
Offline
68
v2g
#1

Здесь нужен элемент адаптивности:

в css вставить в самый конец: 


@media screen and (max-width:450px){

    ul.products li.product {

        position: relative;

        float: left;

        width: 50%;

        margin: 0 auto 1.6em auto;

    }

}

Это должно помочь, 450px - это когда начинает переходить в 1 столбик.

---------- Добавлено 08.03.2016 в 14:20 ----------

wilelf:
Друзья, подскажите, как на этом сайте http://iso-dom.ru/ сделать, чтобы на айфонах всяких плашки с превью товаров были в 1 колонку, а не в 2, как сейчас?

И вообще там надо еще несколько блоков "подлатать" под мобилки.

Просел доход на адсенс Сколько стоит такой сайт? Адаптивный блок и яндекс
wilelf
На сайте с 27.06.2005
Offline
322
wilelf
#2

Поставил вот сюда: view-source:http://iso-dom.ru/wp-content/themes/mystile/custom.css

не работает...

V
На сайте с 25.02.2013
Offline
68
v2g
#3
wilelf:
Поставил вот сюда: view-source:http://iso-dom.ru/wp-content/themes/mystile/custom.css

не работает...

Попробуйте этот:

@media screen and (max-width:450px){
    ul.products li.product {
        position: relative;
        float: none;
        width: 75%;
        margin: 0 auto 1.6em auto !important;
    }
}
wilelf
На сайте с 27.06.2005
Offline
322
wilelf
#4

Спасибо! Все отлично!

V
На сайте с 25.02.2013
Offline
68
v2g
#5
wilelf:
Спасибо! Все отлично!

Не за что!

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий