• Никакой политики на форуме. Иначе - бан!
  • Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

Помогите разобратся с мобильной версией сайта

searchingman

Гуру
Местный
Темы адаптируют под разные разрешения с помощью медиа запросов.
Адаптация темы с нуля достаточно долгий процесс.
Проще выбрать уже адаптивную тему.
 

dave14

Опытный
Местный
Навскидку по ширине товарных блоков
в файле
http://geekbull.com.ua/wp-content/themes/modality/style.css
забита ширина одного товарного блока в 21%:

.woocommerce ul.products li.product {
width: 21%;
height: 355px;
}

Чтобы один блок занимал больше места добавьте в этот файл
Код:
@media only screen and ( max-width: 479px ) {
.woocommerce ul.products li.product {
width: 48% !important;
}
 

ArtemZhyg

Форумчанин
Навскидку по ширине товарных блоков
в файле
http://geekbull.com.ua/wp-content/themes/modality/style.css
забита ширина одного товарного блока в 21%:

.woocommerce ul.products li.product {
width: 21%;
height: 355px;
}

Чтобы один блок занимал больше места добавьте в этот файл
Код:
@media only screen and ( max-width: 479px ) {
.woocommerce ul.products li.product {
width: 48% !important;
}
Спасибо стало лутше, но вознкла проблема с неровным отображением карточек товара
https://drive.google.com/drive/u/0/folders/0B-RLGM63pvb_dmlTekhKa3VyeFk
 

dave14

Опытный
Местный
Спасибо стало лутше, но вознкла проблема с неровным отображением карточек товара
https://drive.google.com/drive/u/0/folders/0B-RLGM63pvb_dmlTekhKa3VyeFk

ну я так понимаю, вы скобку забыли в конце файла стилей добавить:
Код:
@media only screen and ( max-width: 479px ) {
.woocommerce ul.products li.product {
width: 48% !important;
}

.woocommerce ul.products li.product .price {
  position: absolute;
  bottom: 50px;
  left: 40px;
}

.woocommerce ul.products li.product .button {
  position: absolute;
  bottom: 0;
  left: 0px;
}
}
 

ArtemZhyg

Форумчанин
ну я так понимаю, вы скобку забыли в конце файла стилей добавить:
Код:
@media only screen and ( max-width: 479px ) {
.woocommerce ul.products li.product {
width: 48% !important;
}

.woocommerce ul.products li.product .price {
  position: absolute;
  bottom: 50px;
  left: 40px;
}

.woocommerce ul.products li.product .button {
  position: absolute;
  bottom: 0;
  left: 0px;
}
}
добавил не помогло
 

dave14

Опытный
Местный
2. а чтобы убрать неровное отображение я бы min-height задал для блока цены и заголовка.

еще советую надпись "добавить в корзину" переделать на просто "В корзину"
 
Сверху Снизу