Попросили поправити маніакальний випадок — профіксити деформацію збільшення фото в мобільній версії. Теоретично все вирішувалось задаванням параметру: “top:0px; ” для боксу з класом “.ilightbox-holder.supportTouch.dark”. Сам стиль, який слід було переприділити вносився скриптом в тіло об’єкту.
Нажаль, відключити слайдер в мобільних девайсах не було можливості, а завдання вирішити все через CSS ускладнювало те, що подібний клас мали ще два блоки (попереднього та наступного слайду). Відтак, коли ти перебивав стиль основного слайду, то він транслювався і на решту, які просто наповзалои наверх.
@media screen and (orientation: landscape) {
div[class="ilightbox-holder supportTouch dark"]{
top: 0px!important;
}
}
Вирішилось все доволі просто і без хардкоду:
- я вніс параметри для альбомного варіанту
orientation: landscape
- використавши для селектору категоричну прив’язку, замість класичної.
div[class="ilightbox-holder supportTouch dark"]
Приклад інших подібних селекторів можна прочитати в давнішому матеріалі, смачного.