Browse Source

Reduce font-size and image size for greeting for mobile devices

hossainemruz 5 years ago
parent
commit
e7540fe5a9
1 changed files with 44 additions and 0 deletions
  1. 44 0
      static/assets/css/home.css

+ 44 - 0
static/assets/css/home.css

@@ -69,3 +69,47 @@
     transform: translateY(-15px);
     transform: translateY(-15px);
   }
   }
 }
 }
+
+/* ============= Device specific fixes ======= */
+
+/* Extra small devices (portrait phones, less than 576px) */
+
+/* No media query for `xs` since this is the default in Bootstrap */
+
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+}
+
+@media (max-width: 1200px) {
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+  .content {
+    position: relative;
+    top: -75%;
+    height: 70%;
+  }
+
+  .home img {
+    width: 140px;
+    max-width: 50%;
+    height: auto;
+  }
+
+  .home .greeting{
+    font-size: 24pt;
+  }
+}