diff --git a/app/assets/stylesheets/custom.scss b/app/assets/stylesheets/custom.scss
index 33c1e390a..cbe203f0f 100644
--- a/app/assets/stylesheets/custom.scss
+++ b/app/assets/stylesheets/custom.scss
@@ -521,16 +521,22 @@ body>footer a:hover {
   padding-top: 1em;
   margin: .4em
 }
+.dojo-flex{
+  display: flex !important;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: auto;
+}
 
 .dojo {
-  display: inline-block;
-  height: 300px;
   width: 45%;
   margin: 5px;
   padding: 15px 0;
   background: #fff;
   position: relative;
-  text-align: center
+  text-align: center;
+  display: block;
+  height: auto
 }
 
 .dojo>p {
@@ -622,8 +628,7 @@ body>footer a:hover {
 
 @media only screen and (min-width:560px) {
   .dojo {
-    width: 220px;
-    height: 275px;
+    width: calc(220px - 10px);
     margin: 10px;
   }
   .event {
diff --git a/app/views/shared/_dojos.html+smartphone.haml b/app/views/shared/_dojos.html+smartphone.haml
index 5e383c119..c1e27fca7 100644
--- a/app/views/shared/_dojos.html+smartphone.haml
+++ b/app/views/shared/_dojos.html+smartphone.haml
@@ -8,5 +8,5 @@
             = region
             \- #{dojos.count} Dojos
       .panel-collapse.collapse{:id => "collapse#{index}", :role => "tabpanel"}
-        .panel-body.grayscale-bg
+        .panel-body.grayscale-bg.dojo-flex
           = render partial: 'shared/dojo', collection: dojos
diff --git a/app/views/shared/_dojos.html.haml b/app/views/shared/_dojos.html.haml
index 583a45e87..621d32b82 100644
--- a/app/views/shared/_dojos.html.haml
+++ b/app/views/shared/_dojos.html.haml
@@ -1,2 +1,2 @@
-%ul.loaded
+%ul.loaded.dojo-flex
   = render partial: 'shared/dojo', collection: regions_and_dojos.values.flatten