fix: button size on mobile

lovepreetjassal · Jun 25, 2024 · eabbb40 · eabbb40
1 parent ff0be18
commit eabbb40
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/src/app/components/main/main.component.css b/src/app/components/main/main.component.css
@@ -1,6 +1,6 @@
 #tools{
     height: 100vh;
-    width: 100%;
+    width: 30%;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -9,9 +9,15 @@
 
 .tools{
     margin:1em;
+    width: 100%;
 }
 @media only screen and (max-width: 600px) {
     #tools{
-        width: 40%;
+        width: 100%;
+    }
+
+    .tools{
+        margin:1em;
+        width: 90%;
     }
 }
diff --git a/src/app/components/main/main.component.html b/src/app/components/main/main.component.html
@@ -1,4 +1,6 @@
-<div id="tools">
-    <button class="tools" id="trim" mat-raised-button routerLink="trim">Trim</button>
-    <button class="tools" id="unixtime" mat-raised-button routerLink="unixtime">Unix timestamp converter</button>
+<div class="center">
+    <div id="tools">
+        <button class="tools" id="trim" mat-raised-button routerLink="trim">Trim</button>
+        <button class="tools" id="unixtime" mat-raised-button routerLink="unixtime">Unix timestamp converter</button>
+    </div>
 </div>
diff --git a/src/styles.css b/src/styles.css
@@ -2,3 +2,8 @@
 
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+.center{
+    display: flex;
+    justify-content: center;
+}