Adjusted CSS for Smartphone and Tablet

resource/css/_search.scss

@@ -127,8 +127,8 @@
   }
 }
 
-// Extra small devices Phones (<768px)
-@media (max-width: $screen-xs-max) {
+// Smartphone and Tablet
+@media (max-width: $screen-sm-max) {
   .search-top {
     margin-top: 4px 0 0 0;
     padding: 0;
@@ -136,9 +136,13 @@
     box-shadow: none !important;
     -webkit-box-shadow: none !important;
 
+    .search-form {
+      width: 100%;
+    }
+
     .search-top-input-group {
       .search-top-input {
-        width: 180px;
+        width: 100%;
       }
       .btn {
         margin-left: -38px;
@@ -162,36 +166,16 @@
   }
 }
 
-// Small devices Tablets (≥768px)
-@media (max-width: $screen-sm-max) {
+// Smartphone
+@media (max-width: $screen-xs-max) {
   .search-top {
-    margin-top: 4px 0 0 0;
-    padding: 0;
-    border-style: none !important;
-    box-shadow: none !important;
-    -webkit-box-shadow: none !important;
-
-    .search-top-input-group {
-      .search-top-input {
-        width: 240px;
-      }
-      .btn {
-        margin-left: -38px;
-        z-index: 10;
-      }
+    .search-form {
+      width: 24%;
     }
-  }
-
-  .search-result {
-    .search-result-content {
-      .search-result-page {
-        .wiki {
-          h1, h2, h3, h4, h5, h6 {
-            font-size: medium;
-          }
-          height: 250px;
-          overflow: scroll;
-        }
+    .search-box {
+      .search-suggest {
+        left: 2%;
+        width: 94%;
       }
     }
   }