Changed doc page styles

- Added a custom CSS file /css/custom.css - Customized doc page element styles for small displays Signed-off-by: Anubhav Choudhary <[email protected]>
unnati914 · Aug 10, 2021 · 7b210a3 · 7b210a3
1 parent 3f55a01
commit 7b210a3
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 13 deletions.
diff --git a/css/custom.css b/css/custom.css
@@ -0,0 +1,18 @@
+.doc-card {
+    min-height: 200px;
+    border: 1px solid lightgray;
+    margin: 20px;
+    padding: 10px 30px;
+}
+
+.doc-card li {
+    list-style: none;
+}
+
+.doc-help-container .ibm-card__bottom {
+    padding-left: 25px;
+}
+
+.doc-help-container .ibm-card__bottom a{
+    text-decoration: none;
+}
diff --git a/docs/index.html b/docs/index.html
@@ -43,14 +43,15 @@
 <link type="text/css" href="https://www.ibm.com/support/knowledgecenter/css/globaltopic.css" rel="stylesheet" />
 <script type="text/javascript" charset="utf-8" src="/support/knowledgecenter/js/globaltopic.js"></script>
 <link type="text/css" href="/support/knowledgecenter/css/spinner.css" rel="stylesheet" />
+<link type="text/css" href="../css/custom.css" rel="stylesheet" />
 </head>
 <body class="ibm-type" clickeventadded="true">
 	<h1 class="title topictitle1" style="display: none;">{{site.data.keyword.edge_notm}} Version {{site.data.keyword.version}}</h1>
 
 	  <div role="main" class="ibm-background-neutral-white-20 ibm-padding-top-1">
-		  <div class="ibm-columns ibm-widget-processed ibm-sameheight-processed" data-items=".ibm-card" data-widget="setsameheight">
-			  <div class="ibm-col-4-1">
-				  <div class="ibm-card" style="height: 440px;">
+		  <div class="ibm-columns ibm-widget-processed ibm-sameheight-processed row" data-items=".ibm-card" data-widget="setsameheight">
+			  <div class="ibm-col-4-1 col-sm-6 col-md-4">
+				  <div class="doc-card">
 					  <div class="ibm-card__content">
 						  <!--<img src="hero_image.png" alt="" width="50" height="50">-->
 						  <h3 class="linklistlabel ibm-h3 ibm-textcolor-blue-50">Overview</h3>
@@ -65,8 +66,8 @@ <h3 class="linklistlabel ibm-h3 ibm-textcolor-blue-50">Overview</h3>
 					  </div>
 				  </div>
 			  </div>
-			  <div class="ibm-col-4-1">
-				<div class="ibm-card" style="height: 440px;">
+			  <div class="ibm-col-4-1 col-sm-6 col-md-4">
+				<div class="doc-card">
 					<div class="ibm-card__content ">
 						<!--  <img src="secure_plan_18.svg" alt="" width="50" height="50"> -->
 						<h3 class="linklistlabel ibm-h3 ibm-textcolor-blue-50">Installation</h3>
@@ -81,8 +82,8 @@ <h3 class="linklistlabel ibm-h3 ibm-textcolor-blue-50">Installation</h3>
 					</div>
 				</div>
 			</div>
-			  <div class="ibm-col-4-1">
-				<div class="ibm-card" style="height: 440px;">
+			  <div class="ibm-col-4-1 col-sm-6 col-md-4">
+				<div class="doc-card">
 					<div class="ibm-card__content">
 						<!-- <img src="drafts_18.svg" alt="" width="50" height="50"> -->
 						<h3 class="linklistlabel ibm-h3 ibm-textcolor-blue-50">Edge services</h3>
@@ -97,8 +98,8 @@ <h3 class="linklistlabel ibm-h3 ibm-textcolor-blue-50">Edge services</h3>
 					</div>
 				</div>
 			</div>
-			  <div class="ibm-col-4-1">
-				  <div class="ibm-card" style="height: 440px;">
+			  <div class="ibm-col-4-1 col-sm-6 col-md-4">
+				  <div class="doc-card">
 					  <div class="ibm-card__content">
 						  <!-- <img src="analytics_18.svg" alt="" width="50" height="50"> -->
 						  <h3 class="linklistlabel ibm-h3 ibm-textcolor-blue-50">Administering</h3>
@@ -117,14 +118,14 @@ <h3 class="linklistlabel ibm-h3 ibm-textcolor-blue-50">Administering</h3>
 	  </div>
 
 	  <div role="region" aria-label="Additional help links" class="ibm-background-neutral-white-20">
-		<div class="ibm-columns ibm-padding-bottom-2 ibm-widget-processed ibm-sameheight-processed" data-widget="setsameheight" data-items=".ibm-card">
+		<div class="ibm-columns ibm-padding-bottom-2 ibm-widget-processed ibm-sameheight-processed row" data-widget="setsameheight" data-items=".ibm-card">
 			<div class="ibm-col-6-2 ibm-card ibm-card--noborder ibm-background-neutral-white-20 ibm-padding-top-1" style="height: 304.716px;">
 				<div class="ibm-card__content">
 					<h2 class="ibm-h2">Help and support</h2>
 					<p>Be sure to check out these extra help resources.</p>
 				</div>
 			</div>
-			<div class="ibm-col-6-2 ibm-card ibm-card--noborder ibm-background-neutral-white-20 ibm-padding-top-1" style="height: 304.716px;">
+			<div class="ibm-col-6-2 ibm-card ibm-card--noborder ibm-background-neutral-white-20 ibm-padding-top-1 doc-help-container col-sm-6 col-md-4" style="height: 304.716px;">
 				<div class="ibm-card__content">
 					<h4 class="ibm-h4 ibm-textcolor-blue-60">Frequently asked questions</h4>
 				</div>
@@ -134,7 +135,7 @@ <h4 class="ibm-h4 ibm-textcolor-blue-60">Frequently asked questions</h4>
 					</p>
 				</div>
 			</div>
-			<div class="ibm-col-6-2 ibm-card ibm-card--noborder ibm-background-neutral-white-20 ibm-padding-top-1" style="height: 304.716px;">
+			<div class="ibm-col-6-2 ibm-card ibm-card--noborder ibm-background-neutral-white-20 ibm-padding-top-1 doc-help-container col-sm-6 col-md-4" style="height: 304.716px;">
 				<div class="ibm-card__content">
 					<h4 class="ibm-h4 ibm-textcolor-blue-60">Troubleshoot</h4>
 				</div>
@@ -144,7 +145,7 @@ <h4 class="ibm-h4 ibm-textcolor-blue-60">Troubleshoot</h4>
 					</p>
 				</div>
 			</div>
-			<div class="ibm-col-6-2 ibm-card ibm-card--noborder ibm-background-neutral-white-20 ibm-padding-top-1" style="height: 304.716px;">
+			<div class="ibm-col-6-2 ibm-card ibm-card--noborder ibm-background-neutral-white-20 ibm-padding-top-1 doc-help-container col-sm-6 col-md-4" style="height: 304.716px;">
 				<div class="ibm-card__content">
 					<h4 class="ibm-h4 ibm-textcolor-blue-60">Support</h4>
 				</div>