Polaroids are now always spread out in mobile versions (as the default does on PC too)

prosopopee/themes/exposure/static/css/style.css

@@ -445,23 +445,24 @@ input:checked + .slider:before {
   /* BEGIN polaroid-group */
   a.polaroid {
     /*Size by calculating image size*/
-    width: auto !important;
+    width: 60vw !important;
     height: auto !important;
+    max-height: 50vw !important;/*expermtal*/
+    left: 0px !important;
+    top: 0px !important;
+    position:static !important;
   }
 
-  /* Size image for mobile so screen is not getting */
-  a.polaroid img {
-    -webkit-transform: scale(0.7); /* Saf3.1+, Chrome */
-    -moz-transform: scale(0.7); /* FF3.5+ */
-    -ms-transform: scale(0.7); /* IE9 */
-    -o-transform: scale(0.7); /* Opera 10.5+ */
-    transform: scale(0.7);
-    /* IE6–IE9 */
-    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
+  .leftpola {
+    -webkit-transform: rotate(-15deg) !important;
+    -moz-transform: rotate(-15deg) !important;
+    transform: rotate(-15deg) !important;
   }
 
-  a.polaroid h5 {
-    display: none !important; /*No image text on mobile - too small space*/
+  .rightpola {
+    -webkit-transform: rotate(15deg) !important;
+    -moz-transform: rotate(15deg) !important;
+    transform: rotate(15deg) !important;
   }
   /* END polaroid-group */
 }

prosopopee/themes/exposure/templates/sections/polaroid-group.html

@@ -47,7 +47,7 @@
             data-at-800="{{ image.generate_thumbnail("x800") }}"
             data-at-1366="{{ image.generate_thumbnail("x1366") }}"
             data-at-1920="{{ image.generate_thumbnail("x1920") }}"
-            class="polaroid"
+            class="polaroid {% if (loop.index%2 == 1) %}rightpola{% else %}leftpola{% endif %}"
             style="{% if w %}width:{{ w }};{% endif %}{% if h %}height: {{ h }};{% endif %}{% if custpos %}position:absolute;{% endif %}left: {{ x }}; top: {{ y }}; z-index: {{ z }}; -webkit-transform: rotate({{ angle }}deg); -moz-transform: rotate({{ angle }}deg); transform: rotate({{ angle }}deg);">
                 {% if caption %}
                 <img class="lazy" src="" data-original="{{ image.generate_thumbnail("x450") }}" alt="{{ caption }}">