Fixed Results / IA on mobile

static/css/style-instantanswer.css

@@ -1,3 +1,7 @@
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
 .instant-container {
   position: absolute;
   top: 140px;
@@ -38,8 +42,9 @@
 }
 
 .calc-input {
+    box-sizing: border-box;
+    width: 100%;
     padding: 10px;
-    width: 95%;
     font-size: 18px;
     border: 1px solid var(--border);
     border-radius: 4px;
@@ -265,10 +270,21 @@
 }
 
 /* Responsive adjustments */
-@media only screen and (max-width: 1220px) {
+@media only screen and (max-width: 1450px) {
+    .instant-container {
+        right: 75px;
+    }
+}
+
+@media only screen and (max-width: 1350px) {
+    .instant-container {
+        right: 5px;
+    }
+}
+
+@media only screen and (max-width: 1290px) {
     .instant-container {
         position: relative;
-        width: 100%;
         top: 0;
         right: 0;
         margin-left: 175px;

static/css/style.css

@@ -1054,114 +1054,6 @@ p {
     white-space: nowrap;
 }
 
-.snip {
-    padding: 17px;
-    border: 1px solid var(--snip-border);
-    width: 440px;
-    border-radius: 8px;
-    background: var(--snip-background);
-    color: var(--fg);
-    margin-left: 840px;
-    margin-top: 0px;
-    position: absolute;
-    max-width: 48em;
-    line-height: 1.58;
-    font-size: 14px;
-    letter-spacing: normal;
-}
-
-.snip_title {
-    margin-top: 0;
-    margin-bottom: 0;
-    color: var(--highlight);
-    font-weight: bold;
-    font-style: normal;
-    max-width: 48em;
-    line-height: 1.58;
-    font-size: 22px;
-}
-
-.wiki_known_for {
-    margin: 0px;
-    font-weight: normal;
-    margin-bottom: 10px;
-}
-
-.snip img {
-    float: right;
-    max-width: 30%;
-    max-height: 150px;
-    padding-bottom: 10px;
-    margin-left: 10px;
-}
-
-.snip .wiki_link {
-    margin-top: 10px;
-    text-decoration: none;
-    color: var(--link);
-    font-size: 14px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.snip a:hover {
-    text-decoration: underline;
-}
-
-.snip .about {
-    font-size: 18px;
-    margin-top: 10px;
-    margin-bottom: 5px;
-}
-
-.factpoint {
-    color: var(--fg);
-    font-weight: bold;
-    vertical-align: text-top;
-    text-align: left;
-    padding-right: 14px;
-}
-
-.fact a {
-    color: var(--link);
-    text-decoration: none;
-}
-
-.fact a:visited {
-    color: var(--link-visited);
-}
-
-.snipp {
-    padding: 10px;
-    border-bottom: 1px solid var(--border);
-    width: 500px;
-    background: inherit;
-    color: var(--fg);
-    margin-left: 170px;
-    margin-top: 0px;
-    position: relative;
-    line-height: 1.58;
-    font-size: 16px;
-    float: none;
-    max-width: 48em;
-}
-
-.snipp a {
-    display: block;
-    margin-top: 10px;
-    text-decoration: none;
-    color: var(--link);
-    font-size: 14px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.snipp a:hover {
-    text-decoration: underline;
-}
-
 .clickable {
     cursor: pointer;
 }
@@ -1423,33 +1315,12 @@ button {
     /* Applies the background color based on theme */
 }
 
-@media only screen and (max-width: 1320px) {
-
-    .snip {
-        margin-left: 780px;
-    }
-}
-
-@media only screen and (max-width: 1220px) {
-
-    .results {
-        padding-right: 340px;
-    }
-
-    .snip {
-        position: relative;
-        float: none;
-        margin-left: 170px;
-    }
-}
-
 @media only screen and (max-width: 880px) {
 
     .settings-icon-link-search {
         margin-top: -15px !important;
     }
 
-    .snip,
     .no-results-found {
         position: relative;
         float: none;
@@ -1474,14 +1345,6 @@ button {
         height: 77px;
     }
 
-    .snip a {
-        font-size: 13px;
-    }
-
-    .snip_title {
-        font-size: 16px;
-    }
-
     .settings {
         max-width: 100%;
         margin-left: 0px;
@@ -1551,15 +1414,6 @@ button {
         max-width: 90%;
     }
 
-    .snipp {
-        position: relative;
-        float: none;
-        max-width: 90%;
-        margin-left: 10px;
-        width: auto;
-        font-size: 16px;
-    }
-
     p {
         font-size: 13px;
         line-height: normal;