resize photos

web/style.css

@@ -13,6 +13,39 @@ body{
   padding:20px;
 }
 
+/* resize images on mobile */
+@media all and (max-width: 768px) {
+  img.photo-message{
+    width:100%;
+    /* disable anti aliasing */
+    image-rendering: optimizeSpeed;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: -o-crisp-edges;
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: pixelated;
+    image-rendering: optimize-contrast;
+    -ms-interpolation-mode: nearest-neighbor;
+  }
+}
+
+/* resize images on mobile */
+@media all and (min-width: 768px) {
+  img.photo-message{
+    width:50%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    /* disable anti aliasing */
+    image-rendering: optimizeSpeed;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: -o-crisp-edges;
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: pixelated;
+    image-rendering: optimize-contrast;
+    -ms-interpolation-mode: nearest-neighbor;
+  }
+}
+
 img.photo-message{
   /* disable anti aliasing */
   image-rendering: optimizeSpeed;
@@ -23,6 +56,7 @@ img.photo-message{
   image-rendering: optimize-contrast;
   -ms-interpolation-mode: nearest-neighbor;
 }
+
 img.emo {
   width: 22px;
   height: 22px;