タブレットサイズでのレスポンシブ対応

Author: ishi720

index.html

@@ -195,7 +195,7 @@ <h2 class="c-heading-lv1 js-fadein">Skills</h2>
               <div class="container skills__container js-fadein">
                 <ul class="row">
                   <!-- HTML5 -->
-                  <li class="skills__item col-md-3">
+                  <li class="skills__item col-sm-6 col-md-3">
                     <div class="skills__block">
                         <div class="skills__circle" data-progress="90">
                             <div class="skills__circle-inner">
@@ -212,7 +212,7 @@ <h3 class="skills__name">HTML5</h3>
                     </div>
                   </li>
                   <!-- CSS -->
-                  <li class="skills__item col-md-3">
+                  <li class="skills__item col-sm-6 col-md-3">
                     <div class="skills__block">
                         <div class="skills__circle" data-progress="90">
                             <div class="skills__circle-inner">
@@ -229,7 +229,7 @@ <h3 class="skills__name">CSS</h3>
                     </div>
                   </li>
                   <!-- Javascript -->
-                  <li class="skills__item col-md-3">
+                  <li class="skills__item col-sm-6 col-md-3">
                     <div class="skills__block">
                         <div class="skills__circle" data-progress="80">
                             <div class="skills__circle-inner">
@@ -246,7 +246,7 @@ <h3 class="skills__name">Javascript</h3>
                     </div>
                   </li>
                   <!-- Python3 -->
-                  <li class="skills__item col-md-3">
+                  <li class="skills__item col-sm-6 col-md-3">
                     <div class="skills__block">
                         <div class="skills__circle" data-progress="50">
                             <div class="skills__circle-inner">
@@ -263,7 +263,7 @@ <h3 class="skills__name">Python3</h3>
                     </div>
                   </li>
                   <!-- PHP -->
-                  <li class="skills__item col-md-3">
+                  <li class="skills__item col-sm-6 col-md-3">
                     <div class="skills__block">
                         <div class="skills__circle" data-progress="60">
                             <div class="skills__circle-inner">
@@ -280,7 +280,7 @@ <h3 class="skills__name">PHP</h3>
                     </div>
                   </li>
                   <!-- Ruby -->
-                  <li class="skills__item col-md-3">
+                  <li class="skills__item col-sm-6 col-md-3">
                     <div class="skills__block">
                         <div class="skills__circle" data-progress="30">
                             <div class="skills__circle-inner">
@@ -297,7 +297,7 @@ <h3 class="skills__name">Ruby</h3>
                     </div>
                   </li>
                   <!-- Go -->
-                  <li class="skills__item col-md-3">
+                  <li class="skills__item col-sm-6 col-md-3">
                     <div class="skills__block">
                         <div class="skills__circle" data-progress="30">
                             <div class="skills__circle-inner">
@@ -314,7 +314,7 @@ <h3 class="skills__name">Go</h3>
                     </div>
                   </li>
                   <!-- Java -->
-                  <li class="skills__item col-md-3">
+                  <li class="skills__item col-sm-6 col-md-3">
                     <div class="skills__block">
                         <div class="skills__circle" data-progress="10">
                             <div class="skills__circle-inner">