responsive for desktop screens

Author: hmillersarah

ims-tm.html

@@ -319,7 +319,7 @@ <h4>Fundamentals of IMS TM Part 1</h4>
 													<a href="https://mediacenter.ibm.com/media/Intro+to+IMS+-+Fundamentals+of+IMS+TM+Part+1/0_h8f13l3q/139456202" 
 													target="_blank" rel="noopener noreferrer" aria-label="Watch now: Fundamentals of IMS TM Part 1">Watch now →</a>
 													<div class="vid-pv">
-														<div class="vid-margin">
+														<div>
 															<a href="https://mediacenter.ibm.com/media/Intro+to+IMS+-+Fundamentals+of+IMS+TM+Part+1/0_h8f13l3q/139456202"
 																target="_blank" rel="noopener noreferrer" aria-label="Watch Fundamentals of IMS TM Part 1">
 																<img src="wp-content/tm/video-cover-intro-tm-pt1.png" class="image-preview" alt="Fundamentals of IMS TM Part 1 video preview">
@@ -335,7 +335,7 @@ <h4>Fundamentals of IMS TM Part 2</h4>
 												<a href="https://mediacenter.ibm.com/media/Intro+to+IMS+-+Fundamentals+of+IMS+TM+Part+2/0_it2vxrks/139456202" 
 												target="_blank" rel="noopener noreferrer" aria-label="Watch now: Fundamnetals of IMS TM Part 2">Watch now →</a>
 												<div class="vid-pv">
-													<div class="vid-margin">
+													<div>
 														<a href="https://mediacenter.ibm.com/media/Intro+to+IMS+-+Fundamentals+of+IMS+TM+Part+1/0_h8f13l3q/139456202"
 															target="_blank" rel="noopener noreferrer" aria-label="Watch Fundamentals of IMS TM Part 2">
 															<img src="wp-content/tm/video-cover-intro-tm-pt2.png" class="image-preview" alt="Fundamentals of IMS TM Part 2 video preview">
@@ -398,6 +398,7 @@ <h1>4</h1>
 							<div class="zs-section">
 								<div class="pure-u-1">
 									<div class="pure-g">
+										<!-- Speedy transaction -->
 										<div class="pure-u-1-3">
 												<div class="pure-u-3-4">
 													<h3>Speedy transactions</h3>
@@ -413,8 +414,8 @@ <h3>Speedy transactions</h3>
 													target="_blank" rel="noopener noreferrer" aria-label="Learn more about IMS TM speedy transactions">Learn more →</a>
 												</div>
 										</div>
-										<!-- mid contents -->
-										<div class="pure-u-1-3 resource-card">
+										<!-- Ways to work -->
+										<div class="pure-u-1-3">
 											<div class="pure-u-3-4">
 												<h3>Ways to work</h3>
 												<p>Use Red Hat® Ansible® and Red Hat® OpenShift® through digitally transformed ways of working, developing, 
@@ -427,8 +428,8 @@ <h3>Ways to work</h3>
 												target="_blank" rel="noopener noreferrer" aria-label="Learn more about ways to work with IMS TM">Learn more →</a>
 											</div>
 										</div>
-										<!-- right contents -->
-										<div class="pure-u-1-3 resource-card">
+										<!-- Ways to connect -->
+										<div class="pure-u-1-3">
 											<div class="pure-u-3-4">
 												<h3>Ways to connect</h3>
 												<p>Take advantage of not just TCP/IP but RESTful APIs that access IMS™ applications and data in minutes.</p>

wp-includes/css/pages/tm.css

@@ -47,10 +47,7 @@
 
 .vid-pv {
     float: right;
-}
-
-.vid-pv div {
-    margin-top: 30px;
+    margin-top: 20px;
     position: relative;
 }
 
@@ -90,7 +87,6 @@
 }
 
 .benefits-section img {
-    /* height: 200px; */
     width: 300px;
     margin: 20px 0px;
 }
@@ -166,4 +162,11 @@
 .blog-card a {
     color: #78A9FF;
     font-size: 18px;
+}
+
+/* MEDIA QUERIES */
+@media screen and (max-width: 1024px) {
+    .benefits-section img {
+        width: 200px;
+    }
 }