Kaynağa Gözat

Merge pull request #11 from ArcoMul/fix-mobile-layout

Make page responsive for mobile devices
Daoud Clarke 3 yıl önce
ebeveyn
işleme
04d7cbdfe3

+ 9 - 5
tinysearchengine/static/index.css

@@ -3,8 +3,11 @@ html {
     background: #dcdced;
 }
 
+body {
+  font-size: 1.2rem;
+}
+
 p {
-    font-size: 25px;
     width: 100%;
     white-space: nowrap;
     overflow: hidden;
@@ -19,11 +22,12 @@ div {
 
 .url {
    margin-top: 0px;
-   font-size: 20px;
+   font-size: 1rem;
 }
 
-#container {
-  width: 1024px;
+.container {
+  width: 100%;
+  max-width: 1024px;
   margin: 0 auto;
 }
 
@@ -34,7 +38,7 @@ div {
 
     outline: none;
 
-    font-size: 50px;
+    font-size: inherit;
 
     border: 2px solid #ccc;
     border-width: 4px;

+ 3 - 2
tinysearchengine/static/index.html

@@ -1,7 +1,8 @@
 <html>
 <head>
 <meta name="referrer" content="no-referrer">
-<title>Stoatally Different</title>
+  <title>Stoatally Different</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="/index.css" rel="stylesheet">
   <link rel="search"
       type="application/opensearchdescription+xml"
@@ -10,7 +11,7 @@
   <script src="/index.js"></script>
 </head>
 <body>
-<div id="container">
+<div class="container">
   <form autocomplete="off" id="search-form">
     <input type="search" id="search" name="s" value="" autofocus/>
   </form>