D.iK.iJ
 
Ссылки Поиск Написать В избранное NO

Блоггер / Блог 2016 год

RSS лента новостей, Подписка по Email

      Переделываем партнерскую Крутилку Озон.ру под адаптивный дизайн

         Ни для кого не секрет, что есть разные партнерские программы. Например, партнерка от Озона, для которой можно использовать стандартный JavaScript или перевести Крутилку на PHP. А не так давно я сделал для нее адаптивные стили, чтобы товары хорошо отображились на мобильных устройствах.
         Некоторые уточнения.
         Я использовал прозрачные блоки с черным текстом, когда товары идут друг под другом (фотографии слева, а кнопки купить - справа).
         Также, Крутилка выводится на PHP.
         Внешние ссылки выделены на CSS.
         
/* Озон */
.OzonRev_tbMax {margin-bottom: 15px;}
img.OzonRev_border0 {height: 15px !important;}
div.OzonRev_logo > a {background: none !important; padding-right: 0px !important; border-bottom: 0px !important;
.OzonRev_skin_12 .PartnHead .PartnHeadLogo > a {background: none !important;}
.OzonRev_skin_0 .PartnHead .PartnHeadLogo > a {background: none !important;}
.OzonRev_pad5_1 a {border-bottom: 0px !important; background: none !important; padding-right: 0px !important;}
.OzonRev_skin_12 a.OzonRev_detailName {background: none !important; padding-right: 0px !important;}
.OzonRev_skin_0 a.OzonRev_detailName {background: none !important; padding-right: 0px !important;}
a.OzonRev_podrLink {background: none !important; padding-right: 0px !important;}
td.OzonRev_tdPic {width: 90px !important; max-width: 90px !important; padding-right: 10px; padding-bottom: 10px;}
td.OzonRev_tdPic a img {width: auto !important; max-width: 100% !important; height: auto !important; max-height: 120px !important;
td.OzonRev_tdDetail {width: auto !important;}
td.OzonRev_tdSale {width: 112px !important;}

@media screen and (max-width: 500px) {
td.OzonRev_tdPic {display: block !important; float: left !important;}
td.OzonRev_tdDetail {display: inline !important;}
td.OzonRev_tdDetail a {word-break: break-word !important;}
td.OzonRev_tdSale {width: 100% !important; display: block !important; padding-left: 0px !important; padding-right: 0px !important; padding-bottom: 15px !important; clear: left !important; margin-top: -10px !important;}
.OzonRev_skin_12 div.OzonRev_priceTitle {display: inline-block !important; width: auto !important;}
.OzonRev_skin_12 div.OzonRev_priceValue {display: inline-block !important;}
.OzonRev_skin_0 div.OzonRev_priceTitle {display: inline-block !important; width: auto !important;}
.OzonRev_skin_0 div.OzonRev_priceValue {display: inline-block !important;}
.OzonRev_pad5_1 {display: inline-block !important; padding-top: 0px !important; height: 23px !important; vertical-align: middle !important; padding-bottom: 7px !important;}
img.OzonRev_imgBay {width: 24px !important;}
}

         Видно, что на малых разрешениях цена уходит вниз под описание товара, а текст огибает картинку.
         Пример.

         
         
Главная, 1,
( 44 )