update resources display on screen size

Author: hmillersarah

ims-tm.html

@@ -302,10 +302,11 @@ <h3>Ways to connect</h3>
           <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-g pure-g-pad">
             <div class="pure-u-1 pure-u-lg-3-5 pure-u-xxl-1-2">
+              <!-- Transaction orchestration -->
               <div>
-                <h4>Transaction orchestration</h4>
+                <h3>Transaction orchestration</h3>
                 <p>
                   OTMA transaction orchestration enhancement allows OTMA to
                   identify and correctly route an external service response from
@@ -331,6 +332,77 @@ <h4>Transaction orchestration</h4>
                   >
                 </div>
               </div>
+              <!-- More resources -->
+              <div class="pure-u-1 xxl-only">
+                <div class="pure-g pure-g-pad-v">
+                  <div class="pure-u-md-1-2 pure-u-lg-1-3 pure-u-xl-1-3 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 pure-u-sm-21-24 pure-u-lg-1">
+                        <h3>OTMA overview</h3>
+                        <div class="vertical-g">
+                          <a
+                            href="https://www.ibm.com/docs/en/ims/15.6.0?topic=connections-open-transaction-manager-access-otma"
+                            aria-label="Read the docs on an overview of OTMA"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            >Read the docs →</a
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="pure-u-md-1-2 pure-u-lg-1-3 pure-u-xl-1-3 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 pure-u-sm-21-24 pure-u-lg-1">
+                        <h3>The OTMA client</h3>
+                        <div class="vertical-g">
+                          <a
+                            href="https://www.ibm.com/docs/en/ims/latest?topic=otma-client"
+                            aria-label="Read the docs on the OTMA client"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            >Read the docs →</a
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="pure-u-md-1-2 pure-u-lg-1-3 pure-u-xl-1-3 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 pure-u-sm-21-24 pure-u-lg-1">
+                        <h3>OTMA Tpipe Flood Control</h3>
+                        <div class="vertical-g">
+                          <a
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            aria-label="Watch the playlist on OTMA Tpipe Flood Control"
+                            href="https://mediacenter.ibm.com/playlist/dedicated/122579632/1_jjanf1nr/">
+                            Watch the playlist →</a
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
             <div class="pure-u-1 pure-u-lg-2-5 pure-u-xxl-1-2">
               <div class="gif">
@@ -352,11 +424,11 @@ <h4>Transaction orchestration</h4>
           </div>
         </div>
         <!-- More resources -->
-        <div class="pure-u-1 section-header">
-          <h4>More resources</h4>
-        </div>
-        <div class="pure-u-1">
-          <div class="pure-g pure-g-pad-v">
+        <div class="pure-u-1 under-xxl-only">
+          <div class="pure-g pure-g-pad">
+            <div class="pure-u-1">
+              <h4>More resources</h4>
+            </div>
             <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">

wp-includes/css/page.css

@@ -616,6 +616,17 @@ a {
 .homepage-hero p {
   font-size: 16pt;
 }
+
+/* Do not display for screens smaller than 2000px */
+.xxl-only {
+  display: none;
+}
+
+/* Only display for screens smaller than 2000px */
+.under-xxl-only {
+  display: block;
+}
+
 /* -------------------------------------------------------- */
 
 /* Media queries */
@@ -747,4 +758,16 @@ a {
     object-position: bottom;
   }
 }
+
+/* 2000px and above screen sizes */
+@media screen and (min-width: 125em) {
+  /* Display content for xxl screen sizes */
+  .xxl-only {
+    display: block;
+  }
+
+  .under-xxl-only {
+    display: none;
+  }
+}
 /* -------------------------------------------------------- */