Fixes#1

Muskan1411 · Nov 2, 2018 · 499a49d · 499a49d
1 parent f93dbb1
commit 499a49d
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 19 deletions.
diff --git a/css/site.css b/css/site.css
@@ -4,11 +4,14 @@
             width: 100%;
             padding: 0;
             margin: 0;
+            font-size:100%;
+
         }
         @font-face{
             font-family: "Segoe UI";
             src: url('../fonts/segoeuil.ttf');
         }
+
         .main-container {
             height: 100%;
             width: 100%;
@@ -21,12 +24,7 @@
             font-family: "Segoe UI";
         }
 
-        .cloud-image {
-            width: 1200px;
-            height: 250px;
-            padding-bottom: 50px;
-            margin: auto;
-        }
+
 
         .success-text {
             padding-bottom: 20px;
@@ -90,14 +88,14 @@
             min-height: 100px;
             margin: 0 20px;
             position: absolute;
-            left: -100px;
+            left: -80px;
             top: 110px;
         }
         .content-body{
             min-width: 400px;
         }
 
-        @media (max-width: 1024px) {
+      /*  @media (max-width: 1024px) {
             .main-container{
                 padding-top: 1%;
             }
@@ -111,17 +109,17 @@
                 padding-bottom: 20px;
             }
             .success-text {
-                font-size: 50px;
+             
                 line-height: 61px;
                 padding-bottom: 10px;
             }
             .description {
-                font-size: 26px;
+             
                 line-height: 30px;
             }
 
             .step {
-                font-size: 12px;
+               
                 line-height: 18px;
             }
             .tweet-container {
@@ -131,4 +129,56 @@
                 max-width: 630px;
                 min-width: 630px;
             }
-        }
+        }*/
+        @media (max-width: 767px) { 
+            .success-text
+             {
+                font-size:2rem;
+            } 
+            .description {
+                font-size:1rem;
+            }
+            .next-steps-header {
+                font-size:1.6rem;
+            }
+            .step  {
+                font-size:0.51rem;
+            }
+         } 
+@media (min-width: 768px) and (max-width: 1024px) { 
+             .success-text
+             {
+                font-size:4.2rem;
+                line-height: 61px;
+                padding-bottom: 20px;
+            } 
+            .description {
+                font-size:2rem;
+                line-height: 40px;
+            }
+             .next-steps-container {
+                padding-top: 80px;
+            }
+            .next-steps-header {
+                font-size:4rem;
+                padding-bottom: 30px;
+            }
+            .step  {
+                font-size:1.5rem;
+                line-height: 40px;
+                padding-bottom: 10px;
+            }} 
+/*@media (min-width:1100px) { .success-text
+             {
+                font-size:1.6rem;
+            } 
+            .description {
+                font-size:1rem;
+            }
+            .next-steps-header {
+                font-size:1.6rem;
+            }
+            .step  {
+                font-size:0.51rem;
+            } }
+*/
diff --git a/index.html b/index.html
@@ -3,23 +3,29 @@
 
 <head>
      <title>HTML Application</title>
-     <meta charset="utf-8">
-     <meta name="viewport" content="width=device-width, initial-scale=1">
+     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+     <meta name="HandheldFriendly" content="true">
 	 <link href="css/site.css" rel="stylesheet">
      <link rel="icon" href="img/favicon.png" type="image/x-icon"/>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
 </head>
 
 <body>
-    <div class="main-container">
-        <div class="cloud-image">
-            <img src="img/successCloudNew.svg" />
-        </div>
+    <div class="main-container container-fluid">
+        <div class="row">
+            <div class="col-md-10 col-12 justify-content-center">
+
+                <div class="cloud-image">
+                    <img src="img/successCloudNew.svg" class="img-fluid"/>
+                </div>
+            </div>
+        <div class="col-md-10 col-8">
         <div class="content">
             <div class="tweet-container">
             <a href="http://twitter.com/intent/tweet/?text=I%20just%20created%20a%20new%20HTML%20website%20on%20Azure%20using%20Azure%20DevOps%20Project&hashtags=AzureDevOpsProject%2CVSTS%20%40Azure%20%40VSTS">
-                <img src="img/tweetThis.svg" />
+                <img src="img/tweetThis.svg" class="img-fluid" />
             </a>            
         </div>
             <div class="content-body">
@@ -58,6 +64,8 @@
             </div>
         </div>
     </div>
+</div>
+    </div>
 </body>
 
 </html>