Сообщений в теме: 4

[Promo]

Доброго времени суток.

Как реализовать в мобильной версии каталога такое отображение товаров (плиткой по 4 шт на экран)?


Сейчас на экране можно отобразить только один товар. По вебвизору видно как народ негативно реагирует на такое отображение товаров и не долистывает даже до десятого товара.

[Promo]

Promo (27 Февраль 2020 - 20:23) писал:

Доброго времени суток.

Как реализовать в мобильной версии каталога такое отображение товаров (плиткой по 4 шт на экран)?
photo_2020-02-27_23-38-14.jpg

Сейчас на экране можно отобразить только один товар. По вебвизору видно как народ негативно реагирует на такое отображение товаров и не долистывает даже до десятого товара.

???

[metry]

Для внесения изменений зайдите в Редактор Шаблонов-->main.css и найдите:

#OrderAjaxBlock {width:100%;}
/*end Офомление заказа*/
}
@media only screen and (min-width:480px) and (max-width:767px){

после него вставьте:

  .prod_hold{width:165px;overflow:hidden;display:inline-block;vertical-align:top;position:relative;}
  .prod_hold .image img{max-height:165px;max-width:165px;}
  .prod_hold .image{height:165px;width:165px;text-align:center;line-height:165px;}
  #ajaxprod .prod_hold .image{background:#f4f4f4;line-height:165px;}
  #ajaxprod{padding: 20px 20px;margin: 0 auto;text-align: center;}

далее найдите:

@media only screen and (min-width:320px) and (max-width:479px){
#wrap img{max-width:100%;max-height:100%;}

после него вставьте:

  .prod_hold{width:140px;overflow:hidden;display:inline-block;vertical-align:top;position:relative;}
  .prod_hold .image img{max-height:140px;max-width:140px;}
  .prod_hold .image{height:140px;width:140px;text-align:center;line-height:140px;}
  #ajaxprod .prod_hold .image{background:#f4f4f4;line-height:140px;}
.prod_hold .addToCart,.prod_hold .noavalible{text-transform:uppercase;cursor:pointer;width: 100px;height:40px;line-height:40px;border-radius:6px;text-align:center;display:block;background:#99c800;color:white;font-size:16px;}
#ajaxprod{padding: 20px 20px;margin: 0 auto;text-align: center;}

[Promo]

Все отлично. Благодарю.

[VR77]

Доброй ночи. Все сделал как написано. не помогло