Use smaller font on small devices

jonmbake · Nov 3, 2023 · fa38ba9 · fa38ba9
1 parent b4ae827
commit fa38ba9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/calendar.css b/src/calendar.css
@@ -1,3 +1,13 @@
+@media (max-width: 576px) {
+  body {
+    font-size: 12px;
+  }
+  .btn {
+    font-size: 12px;
+  }
+}
+
+
 .time-col {
   flex: 0 0 auto;
   width: 9%;

diff --git a/src/index.tsx b/src/index.tsx
@@ -103,7 +103,8 @@ const Calendar = ({
     <div className="calendar">
       <div className="d-flex justify-content-between m-4">
         <div className="fs-4">
-          <strong>{dateInfo.month}</strong> {dateInfo.year}
+        <span className='d-none d-sm-block'><strong>{dateInfo.month}</strong> {dateInfo.year}</span>
+        <span className='d-block d-sm-none'><strong>{dateInfo.month.substring(0,3)}</strong> {dateInfo.year.toString().substring(2,4)}</span>
         </div>
         <div className="btn-group btn-group-sm" role="group">
           <button