Transformations: Image shape and Card size now work on phones

A merchant told us the Transformations section was not mobile optimized. They were right, and the cause turned out to be more specific than a layout that needed tidying.

What was going on

The two settings at the very top of the section — Image shape and Card size — were being ignored on every phone and tablet. Not partially: at 320px wide, Card size 50%, 60% and 72% all rendered exactly the same 215px card. You could drag that slider all day and nothing would move.

The reason is that the section's mobile rules were written with fixed numbers baked in, which quietly painted over whatever you had chosen. Above tablet width your settings applied normally, so the section looked correct in the theme editor on a desktop and then didn't match on a phone.

The second half is the part that actually breaks the design. The two photos are pinned to the top and bottom of a frame, so the shape of that frame is what decides how much they overlap. The fixed numbers replaced the frame's shape but left the photos' shape alone, and those two are meant to move together. With Landscape selected, the result on every phone was that the two photos stopped overlapping at all — two separate rectangles with a gap between them, and the hand-drawn "from this / to this" arrows pointing at nothing. On a before-and-after section, that is the whole point of the section gone.

What we changed

The mobile rules now derive the frame from your settings instead of overriding them. We worked out the relationship between the frame shape, the photo shape and the card size that produces the overlap, and let the section solve it for whatever you have picked — so the composition now holds at every shape, every card size and every screen width.

Two things worth saying plainly:

• If you have this section installed and haven't changed those settings, nothing about it will look different. We pinned the new calculation to the exact values the default already produced, so a default install renders identically. What changes is that the other options now do something.
• The gap beneath the photos now grows with Card tilt. At the highest tilt setting the lower photo used to land about 6px on top of the heading.

How to get it

Open Modulo → Sections in your Shopify admin. The Transformations section will show Update available — click Update to latest. Your settings are kept.

Our test for this measures the real section in a real browser across nine shape-and-size combinations and twelve screen widths, 1,386 checks in total. We also run it against the old code deliberately: 93 of those checks fail there, which is how we know the test is measuring the actual problem and not just agreeing with itself.