Show sponsor logos by 1- or 2-columns depending on min-width

Author: yasulab

app/assets/stylesheets/custom.scss

@@ -37,48 +37,35 @@ div #README{
 .snsb iframe {
     margin: 0 !important;
 }
-  
+
+// Sponsor section
 .sponsors_logo {
-    ul{
-        padding: 0;
-        margin: 0;
-        width: 100%;
-        font-size: 0;
-    }
-    li{
-        padding: 0;
-        margin: 10px 0px 10px 1px;
-        list-style-type:none;
-        display: inline-block;
-        width: 21%;
-        font-size: 12px;
-    }
+  ul{
+    padding-left: 0px;
+  }
+  li{
+    list-style-type: none;
+    display: inline-block;
+    padding-top: 20px;
+    width:  300px;
+    height: 120px;
 
-    a{
-      text-decoration: none;
-      cursor: none;
+    @media only screen and (min-width: 560px) {
+      padding: 20px  0px 0px  0px;
+      margin:   0px  0px 0px  0px;
+      width:  220px;
+      height: 100px;
+    }
+    @media only screen and (min-width: 720px) {
+      padding:  0px 20px 0px 20px;
+      margin:  20px  0px 0px  0px;
+      width:  320px;
+      height: 100px;
     }
     img{
       width:100%;
-         &:hover {
-            cursor: pointer;
-        }
-    }
-}
-
-@media only screen and (max-width:720px) {
-    .sponsors_logo{
-        li{
-            width: 46%;
-        }
-    }
-}
-@media only screen and (max-width:560px) {
-    .sponsors_logo{
-        li{
-            width: 90%;
-        }
     }
+  }
 }
 
 // Customized by @coderdojo-tokyo