Hello,
Can someone provide guidance on how to set the image comparison to match the square or 1:1 of the images, while also maintaining responsiveness on different platforms?
Thanks!
Andrew
Hi Andrew 
To make it square, just set the same value for width and height.
For example (per viewport):
-
Desktop → 500px width / 500px height
-
Tablet → 400px / 400px
-
Mobile → 300px / 300px
As long as width and height are equal, it will stay perfectly square.
Since Sitejet is responsive, you can adjust those values separately for Desktop, Tablet, and Mobile.
That’s all you need 
examples here :
1 Like
Hi Chris!
Much appreciated! In the bit of the research that I’ve done most indications say that the more modern way is to use the aspect ratio code indicating one to one. Is there any way to insert that somewhere in the image comparison code? Forcing pixel size seems kind of limiting when there seems to be better ways and more efficient ways to do this.
1 Like
You’re 100% right — aspect-ratio: 1 / 1 is the modern / clean way to keep it square, and you don’t need to hard-force a fixed pixel height.
In Sitejet you can do it by applying the aspect ratio to the wrapper/container that holds the comparison, e.g.:
/* wrapper of the comparison element */
.compare-wrap{
aspect-ratio: 1 / 1;
width: 100%;
max-width: 100%;
}
/* make sure images fill the square */
.compare-wrap img{
width: 100%;
height: 100%;
object-fit: cover;
}
If the comparison snippet has an inner element that controls the visible area, put the aspect-ratio on that element instead (the one that defines the height).
And if you need different behavior per device, you can still tune it per breakpoint in Sitejet (desktop/tablet/mobile) without ever locking it to a single fixed pixel size.
Thanks Chris. I am not really a coder and tried this but it didn’t work. Are you able to take a screenshot of that code inserted into an example css so I can replicate it?
With appreciation!
Andrew