diff --git a/core/frontend/src/cards/css/before-after.css b/core/frontend/src/cards/css/before-after.css index 34855dfc03..baed1145f7 100644 --- a/core/frontend/src/cards/css/before-after.css +++ b/core/frontend/src/cards/css/before-after.css @@ -10,9 +10,8 @@ left: 0; } -.kg-before-after-card img { +.kg-before-after-card .kg-before-after-card-image-before img { max-width: none; - width: unset; } .kg-before-after-card input { diff --git a/core/frontend/src/cards/js/before-after.js b/core/frontend/src/cards/js/before-after.js index 2996a804e9..ae6e7c0cb4 100644 --- a/core/frontend/src/cards/js/before-after.js +++ b/core/frontend/src/cards/js/before-after.js @@ -2,14 +2,10 @@ const beforeAfterCards = [...document.querySelectorAll('.kg-before-after-card')]; for (let card of beforeAfterCards) { - const isFullWidth = card.classList.contains('kg-width-full'); const input = card.querySelector('input'); const overlay = card.querySelector('.kg-before-after-card-image-before'); const button = card.querySelector('.kg-before-after-card-slider-button'); const images = [...card.querySelectorAll('img')]; - const smallestImageWidth = Math.min( - ...images.map(img => parseInt(img.getAttribute('width'))) - ); function updateSlider() { overlay.setAttribute('style', `width: ${input.value}%`); @@ -17,11 +13,9 @@ } function updateDimensions() { - const containerWidth = parseInt(getComputedStyle(card).getPropertyValue('width')); - const width = isFullWidth ? containerWidth : Math.min(smallestImageWidth, containerWidth); - for (let image of images) { - image.setAttribute('style', `width: ${width.toString()}px;`); - } + const imageWidth = getComputedStyle(images[0]).getPropertyValue('width'); + + images[1].setAttribute('style', `width: ${imageWidth}`); } input.addEventListener('input', function () {