tets css

asset/css/style.css

@@ -6,15 +6,15 @@ wrapper{
   -moz-transition: all .5s ease-in-out;
   -webkit-transition: all .5s ease-in-out;
   transition: all .5s ease-in-out;
-  -moz-column-gap: 30px;
-  -webkit-column-gap: 30px;
-  column-gap: 30px;
+  -moz-column-gap: 10px;
+  -webkit-column-gap: 10px;
+  column-gap: 10px;
   -moz-column-fill: initial;
   -webkit-column-fill: initial;
   column-fill: initial;
 }
 .masonry .brick {
-  margin-bottom: 30px;
+  margin-bottom: 10px;
   overflow: hidden;
 }
 .masonry .brick img {
@@ -29,13 +29,13 @@ wrapper{
   -moz-column-rule: 1px solid #eee;
   -webkit-column-rule: 1px solid #eee;
   column-rule: 1px solid #eee;
-  -moz-column-gap: 50px;
-  -webkit-column-gap: 50px;
-  column-gap: 50px;
+  -moz-column-gap: 10px;
+  -webkit-column-gap: 10px;
+  column-gap: 10px;
 }
 .masonry.bordered .brick {
-  padding-bottom: 25px;
-  margin-bottom: 25px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
   border-bottom: 1px solid #eee;
 }
 .masonry.gutterless {
@@ -51,7 +51,7 @@ wrapper{
   -moz-column-span: all;
   -webkit-column-span: all;
   column-span: all;
-  *margin: 30px 0;
+  *margin: 10px 0;
 }
 
 @media only screen and (min-width: 1024px) {
@@ -64,8 +64,8 @@ wrapper{
   }
 
   .wrapper {
-    width: 80%;
-    padding: 2em;
+    width: 100%;
+    padding: 0.5em;
   }
 
   .masonry {
@@ -76,8 +76,8 @@ wrapper{
 }
 @media only screen and (min-width: 768px) and (max-width: 1023px) {
   .wrapper {
-    width: 85%;
-    padding: 1.5em;
+    width: 100%;
+    padding: 0.5em;
   }
 
   .masonry {