Image Aspect Ratio not honoured in Checkout mobile skin leads to unacceptable cropping

[AVsupport]

We are selling artworks. Images are professionally made and input into the system in square image ratio 1:1.

Square Shop internal image ratio is also set to 1:1 square.

When using the direct shopping link on a PC, everything is fine:

When using the direct shopping link on a smartphone, the system wide square image aspect ratio is no longer honoured and cropping of the image occurs. This is unacceptable, and perhaps a simple coding issue.

Normally, in a responsive skin design, one can make the selection to either 'crop to fit' or 'fit inside'. All image data should be set to fit inside the mobile skin image frame.

PC

iphone 8SE smartphone

tried numerous different ways but there's no remedy, please help.

@Seamus ,85% of our customers are using smartphones through our virtual tours to purchase artworks. This must work and look good on those devices. Thank you

[Seamus]

Hey @AVsupport,

Thanks for your feedback! I'm checking in with our eCommerce team to verify whether this is a bug or operates as intended - I'll let you know what I hear.

I do agree that it would be handy to have the option to display images consistently across mobile and desktop!

[AVsupport]

Thanks @Seamus appreciated, I believe this is a coding oversight; if this was operating as intended, the intentions wouldn't be meeting the requirements. I am familiar with website creation including image carousels in responsive designs, etc, so these choices (fit into frame, min/max frame size,..) should exist. 

[Seamus]

@AVsupport I had some feedback that the images should be displaying fine on the mobile version of the website:

Are you viewing these links via another way? Checkout links or QR codes maybe?

[AVsupport]

Yes As I said in the OP, these are direct shopping links used that open in a new browser window:

this is the bespoke link used for the item above:

https://checkout.square.site/merchant/4CG4S91AMBH98/checkout/6BFRWOMLR5WPSTX3MM477JCJ 

if you copy/paste this link into your browser (chrome) and use developer mode (F12) / iphone5/6/8 you can replicate the result yourself:

that's the very thing that happens on the smartphone

[Seamus · Accepted solution]

Thanks for clarifying @AVsupport - I can confirm that on a Checkout Link the image is appearing cut off for me as well.

I will follow this up again, but from the looks of it Checkout Links are universally displaying a different image ratio than the actual direct link to the item on the Square Online website.

As a workaround would it be possible to use direct links to the Square Online website item listing rather than Checkout Links?

[AVsupport]

Thanks for following this up @Seamus, I guess this is the best way forward for now.

Could you pls post when a fix is available for this

Very much appreciated!

[Seamus]

Hey again @AVsupport,

I can confirm that Checkout Links have been built to display images at a different ratio - however this also gave me the opportunity to raise the inconsistency on a user experience level internally.

I'm not sure what the outcome might ultimately be here, however it's being looked at by the eCommerce team. Thanks for reporting!

[AVsupport]

Big thanks, fingers crossed the bright minds will come to the same conclusion 😉 !