Added responsive design improvement to support modern mobile browsers

bobkovalex · bobkovalex · commit c00c926e1a7b · 2018-11-06T16:04:27.000+03:00
diff --git a/index.html b/index.html
@@ -2,9 +2,12 @@
 <html>
 	<head>
 		<title>GroupDocs.Viewer</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 		<link href="favicon.ico?v1.0" rel="shortcut icon" type="image/vnd.microsoft.icon">
 		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
 		<link type="text/css" rel="stylesheet" href="resources/css/groupdocs.viewer.css"/>
+		<link type="text/css" rel="stylesheet" href="resources/css/groupdocs.viewer.mobile.css"/>
 	</head>
 	<body>
 		<div id="logo">
diff --git a/resources/css/groupdocs.viewer.mobile.css b/resources/css/groupdocs.viewer.mobile.css
@@ -0,0 +1,40 @@
+@media screen and (max-width: 768px){
+    #logo{
+        position: relative;
+        width: 100%;
+        text-align: center;
+        left: 0;
+    }
+
+    #navigation{
+        position: relative;
+        right: 0;
+        width: 100%;
+        text-align: center;
+        top: 35px;
+    }
+
+    #navigation > li{
+        font-size: 16px;
+        margin: 0 20px;
+    }
+
+    #container{
+        width: 276px;
+        margin-left: -138px;
+    }
+
+    #container > h1{
+        font-size: 70px;
+    }
+
+    #social{
+        font-size: 22px;
+    }
+
+    #social > li{
+        margin: 10px 25px;
+        display: inline-block;
+    }
+
+}
