Image Comparison Element

If I add a CSS override to the element’s Advanced tab, I can get over this problem…

.hd-image-comparison {
margin: 0 !important;
}

Hi applestalk,

I am sorry, but I cannot confirm this. The width/height settings work just as intended (see the documentation on Width and Height) and there is no different behaviour depending on the row layout.

Maybe there’s a misunderstanding in what you expected these settings to do. Could you please elaborate what your settings are and what outcome you expected?

Kind regards
Thomas

I want a Thirds grid but that’s when the images do NOT fill the column as it adds 40px on either side (hence the CSS override).

You can see in this screengrab the corrected images above, filling their columns and a new test below with the same 600px width as above.

https://gyazo.com/6f78a6a66ca5352b29898d5581ec8798

The margin is there on purpose. It’s meant to prevent the slider icon (slider thumb) from overlaying other content or not being accessible. The margin is added regardless of the row layout.

The calculation of the margin is actually not quite right at the moment, this will be fixed with aa69bd2. But the fact that there is a margin is intentional.

So if you do not want to have this margin, you are totally right in adding a CSS rule to customize the styling as there is no option to turn it off.

• This reply was modified 2 years, 2 months ago by forrestkirby.

That’s great, thank you Thomas for getting back to me on this issue, it’s good to see a developer keeping on top of support, even when the extension is free.