Изображения в мобильной версии сайта обрезаются (Squarespace) - PullRequest
Новая
       98

Изображения в мобильной версии сайта обрезаются (Squarespace)

0 голосов
/ 26 мая 2020

В Squarespace мобильные версии изображений обрезаются.

Вот хороший пример:

https://www.nigelartingstall.com/new-editions/green%20woodpeckers

Изображение отображается полностью на рабочем столе, но ниже 768 пикселей оно обрезается до квадрата.

На сайте есть изображения разных крыс ios, квадратные, портретные, альбомные и широкоформатные. Итак, какую бы настройку я ни использовал для соотношения изображения в Squarespace, нет возможности отобразить все изображения без обрезки на мобильном устройстве, но на настольном компьютере все в порядке.

Есть ли CSS решение, позволяющее сделать эту работу на мобильных устройствах так же, как на настольных компьютерах?

1 Ответ

0 голосов
/ 26 мая 2020

Да, вы можете решить эту проблему в Squarespace с помощью CSS. Поскольку Squarespace не дает вам возможности сохранить исходное соотношение сторон изображения на мобильном устройстве, его необходимо переопределить. Кроме того, JavaScript на странице может подстраиваться под некоторые из правил CSS после их добавления, поэтому мы должны добавить еще одно правило, чтобы переопределить это.

Следующий CSS, вставлен через Custom CSS, должно получиться: 

.ProductItem-gallery-slides-item-image {
  position: relative !important;
}
@media screen and (max-width: 767px) {
  .tweak-product-basic-item-gallery-design-stacked .ProductItem-gallery-slides::before {
    padding-bottom: 0;
  }
  .ProductItem-gallery-slides-item {
    position: relative;
  }
}
...