When I created the HTML and CSS of FORVM about half a year ago, I stumbled over a bug in Compass, that made it impossible to me to create a retina icon sprite, that was exactly twice the size of the standard sprite image. Using two folders, icon and icon-retina, the image order was completely messed up and I didn’t know why.

Some time ago I reused parts of the old code base and asked myself, why I didn’t post about that issue before. On default, Compass creates vertically aligned images. But with just two lines of code, you can force horizontal images, which will appear in correct order.


Side note: On FORVM I used self-developed code to show either standard or retina images. Nowadays I stick to easier solutions like presented on

Marco Raddatz

Marco Raddatz


Marco Raddatz Private blog of Marco Raddatz from Hamburg, Germany. Back to Overview