First time dealing with 2D transform feature. We want to create isometric phone layout like this:
We used a background image as a guide and eyeballed our way (with a lot of trial and error) for each of the phone image, and largely the layout is fine if you’re browsing in a 15" device. But we can’t seem to maintain the isometric layout when we browse in full screen browser, or when we view on smaller screens.
Surely there’s a way to accurate create and maintain the isometric layout without us just playing around endlessly?
As the screen size gets smaller, the phones start to get pretty bunched up and overlapping with one another. What we would like is the image to start cropping from the bottom left corner (we plan to have text on the right) as screen size gets smaller…So for instance, if we view the same image on iPad (yellow denotes the full screen area), the isometric phones will be a bit cropped:
We tried wrapping all the isometric phones in a div and then setting the margin as negative digit on small screens as a way to -hopefully - keep the current layout and just shifting the whole layout over to the left, but that actually didn’t do anything. 
Would anyone know how we can do this please?
Thanks!
Our read-only link is here