update communities section responsive styling

Author: hmillersarah

ims-apis.html

@@ -218,13 +218,13 @@ <h2>Check it out!</h2>
           <div class="pure-g pure-g-pad">
             <div class="pure-u-1 pure-u-sm-1-2">
               <div class="pure-g">
-                <div class="pure-u-1-5 pure-u-md-1">
+                <div class="pure-u-1-5 pure-u-sm-1">
                   <img
                     src="wp-content/Icon_ZTrials_z OS ConnectPage.svg"
                     alt=""
                     class="icon-sm" />
                 </div>
-                <div class="pure-u-4-5 pure-u-md-1">
+                <div class="pure-u-4-5 pure-u-sm-1">
                   <h3>z/OS Connect Designer tutorials</h3>
                   <p><b>No installation required.</b></p>
                   <p>
@@ -242,13 +242,13 @@ <h3>z/OS Connect Designer tutorials</h3>
             </div>
             <div class="pure-u-1 pure-u-sm-1-2">
               <div class="pure-g">
-                <div class="pure-u-1-5 pure-u-md-1">
+                <div class="pure-u-1-5 pure-u-sm-1">
                   <img
                     src="wp-content/Icon_API toolkit_z OS ConnectPage.svg"
                     alt=""
                     class="icon-sm" />
                 </div>
-                <div class="pure-u-4-5 pure-u-md-1">
+                <div class="pure-u-4-5 pure-u-sm-1">
                   <h3>Get the API toolkit</h3>
                   <p>
                     IBM z/OS Connect base already installed? Design, map, and
@@ -379,8 +379,8 @@ <h3>
           <h2>Communities</h2>
         </div>
         <div class="pure-u-1 pure-u-lg-3-4">
-          <div class="pure-g pure-g-pad">
-            <div class="pure-u-1 pure-u-sm-1-2">
+          <div class="pure-g pure-g-pad-btm">
+            <div class="pure-u-1 pure-u-lg-1-2">
               <div class="pure-g">
                 <div class="pure-u-1-5 pure-u-md-1">
                   <img
@@ -404,7 +404,7 @@ <h3>IBM z/OS Connect Community</h3>
                 </div>
               </div>
             </div>
-            <div class="pure-u-1 pure-u-sm-1-2">
+            <div class="pure-u-1 pure-u-lg-1-2">
               <div class="pure-g">
                 <div class="pure-u-1-5 pure-u-md-1">
                   <img

wp-includes/css/page.css

@@ -587,6 +587,10 @@ a {
   .cta {
     flex-flow: row wrap;
   }
+  /* Decrease padding for smaller screens */
+  .pure-g-pad-btm > div {
+    padding: 0.4em;
+  }
 }
 
 /* 768px and below screen sizes */
@@ -616,9 +620,6 @@ a {
   .pure-g-pad-wd > div {
     padding: 2em 0.4em 0em 0em;
   }
-  .pure-g-pad-btm > div {
-    padding: 0.4em;
-  }
 
   /* Decrease highlight link padding for smaller screens */
   .highlight-link {