responsive otma section

Author: hmillersarah

ims-tm.html

@@ -303,7 +303,7 @@ <h2>What’s new in transaction management?</h2>
         </div>
         <div class="pure-u-1">
           <div class="pure-g pure-g-pad-v">
-            <div class="pure-u-1 pure-u-lg-3-5 pure-g-pad-v">
+            <div class="pure-u-1 pure-u-lg-3-5 pure-u-xxl-1-2">
               <div>
                 <h4>Transaction orchestration</h4>
                 <p>
@@ -332,7 +332,7 @@ <h4>Transaction orchestration</h4>
                 </div>
               </div>
             </div>
-            <div class="pure-u-1 pure-u-lg-2-5">
+            <div class="pure-u-1 pure-u-lg-2-5 pure-u-xxl-1-2">
               <div class="gif">
                 <a
                   href="https://mediacenter.ibm.com/media/1_u4hy5e26"
@@ -357,14 +357,15 @@ <h4>More resources</h4>
         </div>
         <div class="pure-u-1">
           <div class="pure-g pure-g-pad-v">
-            <div class="pure-u-md-1-2 pure-u-lg-1-4 pure-g">
-              <div class="pure-u-1">
+            <div class="pure-u-md-1-2 pure-u-lg-1-3 pure-u-xl-1-4 pure-g">
+              <div class="pure-g">
+              <div class="pure-u-sm-3-24 pure-u-lg-1">
                 <img
                   src="wp-content/icons/icon_documentation.svg"
                   alt=""
                   class="icon-sm" />
               </div>
-              <div class="pure-u-1">
+              <div class="pure-u-1 pure-u-sm-21-24 pure-u-lg-1">
                 <h3>OTMA overview</h3>
                 <div class="vertical-g">
                   <a
@@ -376,15 +377,17 @@ <h3>OTMA overview</h3>
                   >
                 </div>
               </div>
+              </div>
             </div>
-            <div class="pure-u-md-1-2 pure-u-lg-1-4 pure-g">
-              <div class="pure-u-1">
+            <div class="pure-u-md-1-2 pure-u-lg-1-3 pure-u-xl-1-4 pure-g">
+              <div class="pure-g">
+              <div class="pure-u-1 pure-u-sm-3-24 pure-u-lg-1">
                 <img
                   src="wp-content/icons/icon_documentation.svg"
                   alt=""
                   class="icon-sm" />
               </div>
-              <div class="pure-u-1">
+              <div class="pure-u-1 pure-u-sm-21-24 pure-u-lg-1">
                 <h3>The OTMA client</h3>
                 <div class="vertical-g">
                   <a
@@ -396,15 +399,17 @@ <h3>The OTMA client</h3>
                   >
                 </div>
               </div>
+              </div>
             </div>
-            <div class="pure-u-md-1-2 pure-u-lg-1-4 pure-g">
-              <div class="pure-u-1">
+            <div class="pure-u-md-1-2 pure-u-lg-1-3 pure-u-xl-1-4 pure-g">
+              <div class="pure-g">
+              <div class="pure-u-1 pure-u-sm-3-24 pure-u-lg-1">
                 <img
                   src="wp-content/icons/icon_video.svg"
                   alt=""
                   class="icon-sm" />
               </div>
-              <div class="pure-u-1">
+              <div class="pure-u-1 pure-u-sm-21-24 pure-u-lg-1">
                 <h3>OTMA Tpipe Flood Control</h3>
                 <div class="vertical-g">
                   <a
@@ -416,6 +421,7 @@ <h3>OTMA Tpipe Flood Control</h3>
                   >
                 </div>
               </div>
+              </div>
             </div>
           </div>
         </div>

wp-includes/css/page.css

@@ -646,7 +646,7 @@ a {
     padding: 0.4em;
   }
   .pure-g-pad-v > div {
-    padding: 0.4em;
+    padding: 0.4em 0;
   }
   .pure-g-pad-wd > div {
     padding: 2em 0.4em 0em 0em;