Make dates become responsive earlier

asadkhan777 · Oct 10, 2024 · 20b18ba · 20b18ba
1 parent 234b542
commit 20b18ba
Showing 1 changed file with 47 additions and 39 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -243,53 +243,61 @@
                 line-height: 1.4;
             }
 
-            @media screen and (max-width: 640px) {
-              body {
-                  padding: 10px;
-              }
-              .top-section {
-                  margin-left: 12px;
-                  flex-direction: column;
-              }
-              .header {
-                color: #2980b9;
-                font-size: 1.7em;
-                font-weight: 600;
-                padding-bottom: 10px;
-              }
-              .sub-header {
-                font-size: 1em;
-                padding-bottom: 10px;
-              }
-              .contact-info {
-                font-size: 0.9em;
-                margin-top: 12px;
-                flex-direction: column;
-              }
-              .contact-info div {
-                width: 100%;
-                margin-bottom: 10px;
-              }
-              .section-title {
-                font-size: 1.3em;
-              }
-              .section {
-                font-size: 0.95em;
-                padding-bottom: 4px;
-              }
-              ul.sublist :last-child { 
-                margin-bottom: 20px
-              }
+            @media screen and (max-width: 900px) {
               .date {
                 margin-left: 0px;
                 position: relative;
                 display: block;
               }
             }
 
-            @media print {
-                .section { page-break-before: auto; }
+            @media screen and (max-width: 720px) {
+            body {
+                padding: 10px;
+            }
+            .top-section {
+                margin-left: 12px;
+                flex-direction: column;
+            }
+            .header {
+              color: #2980b9;
+              font-size: 1.7em;
+              font-weight: 600;
+              padding-bottom: 10px;
+            }
+            .sub-header {
+              font-size: 1em;
+              padding-bottom: 10px;
+            }
+            .contact-info {
+              font-size: 0.9em;
+              margin-top: 12px;
+              flex-direction: column;
+            }
+            .contact-info div {
+              width: 100%;
+              margin-bottom: 10px;
             }
+            .section-title {
+              font-size: 1.3em;
+            }
+            .section {
+              font-size: 0.95em;
+              padding-bottom: 4px;
+            }
+            ul.sublist :last-child { 
+              margin-bottom: 20px
+            }
+            .date {
+              margin-left: 0px;
+              position: relative;
+              display: block;
+            }
+          }
+
+          @media print {
+              .section { page-break-before: auto; }
+          }
 
         </style>
     </head>