Feat add responsiveness to dates (#1)

* update css value for fluid responsiveness * add viewport for mobile * space update
molaycule · Sep 19, 2023 · b7e4e1d · b7e4e1d
1 parent 4c3ab85
commit b7e4e1d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git a/dev/index.html b/dev/index.html
@@ -3,6 +3,8 @@
 <html>
 
 <head>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta charset="utf-8" />
   <title>&lt;my-element> Demo</title>
   <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/calendar-wc.styles.ts b/src/calendar-wc.styles.ts
@@ -11,7 +11,7 @@ const CalendarStyles = css`
   }
 
   .calendar {
-    width: 496px;
+    width: 100%;
     height: auto;
     border-radius: 8px;
   }
@@ -59,7 +59,7 @@ const CalendarStyles = css`
   }
 
   .month {
-    width: 240px;
+    width: 48%;
     height: auto;
   }
 
@@ -79,7 +79,7 @@ const CalendarStyles = css`
     justify-content: center;
     align-items: center;
     color: #bebebe;
-    width: 28px;
+    width: 14.2857%;
   }
 
   .clear-dates-btn,
@@ -132,8 +132,7 @@ const CalendarStyles = css`
 
   .days div {
     font-size: 0.75rem;
-    margin: 4.8px;
-    width: 23.2px;
+    width: 14.2857%;
     height: 26.4px;
     display: flex;
     justify-content: center;