Почему slick slider неправильно высчитывает ширину слайда?

Question

[Qurel]

Почему slick slider неправильно высчитывает ширину слайда? Слайдом является картинка, у которой задано max-width: 100%.

spoiler

GitHubPages

Comments

[Ankhena]

И что, 374px оказываются больше 100%?

Слайдом является картинка

Ничего подобного. Слайд это picture.

А 374 вот

.advantages-content__block.advantages-content__block--product {
    max-width: 374px;
    margin-top: 280px;
}

[Qurel]

Ankhena, я задала max-width, оно должно уменьшаться

[Ankhena]

Qurel, куда уменьшаться?

Родитель 374 точки, макс ширина картинки 374 точки.
А вы какого результата хотите добиться?

[Qurel]

Ankhena, чтобы картинка адаптировалась под ширину экрана и не обрезалась

[Ankhena]

Qurel, не вижу, чтобы она обрезалась.

[Qurel]

Ankhena, я сделала максимальную ширину 290 пикселей у .advantages-content__block.advantages-content__block--product при разрешении экрана 400 пикселей. Думаю, что это костыльно. Есть какие-то другие варианты?

[Ankhena]

Qurel,
у вас у body мин ширина 320
но

.advantages-content__header {
    max-width: 240px;
    margin-left: 100px;
}

это уже больше, чем 320

Вероятно, есть еще аналогичные фокусы.

Обводите блоки outline'ом c отрицательным outline-offset и проверяйте что происходит.
Предварительно сняв с body overflow. Если выяснится, что overflow всё таки нужен, перевесите его на нужный блок.

Если у вас БЭМ, то зачем пишете такую дичь в селекторах

.advantages-content__block.advantages-content__block--product

? Достаточно класса модификатора.

[Qurel]

Лучше так написать: .advantages-content__block.product ?

[Qurel]

Спасибо за советы