#237 - Adjusting the modal size for tablet

labhackercd · Dec 17, 2021 · 88e6c71 · 88e6c71
1 parent db1790d
commit 88e6c71
Showing 1 changed file with 22 additions and 3 deletions.
diff --git a/src/components/InfoModal/style.js b/src/components/InfoModal/style.js
@@ -3,14 +3,21 @@ import { makeStyles } from '@material-ui/core/styles';
 
 export const useStyles = makeStyles((theme) => ({
   container: {
-    margin: '50% 16px 0px 16px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignContent: 'center',
+
+    [theme.breakpoints.only('xs')]: {
+      margin: '50% 16px 0px 16px',
+    },
 
     [theme.breakpoints.up('sm')]: {
-      margin: '50% 35px 0px 35px',
+      margin: '50% 0px 0px 0px',
     },
   },
   modal: {
-    width: '100%',
+    minWidth: '100%',
+    maxWidth: '425px',
     position: 'relative',
     fontSize: '12px',
     padding: '20px',
@@ -19,13 +26,21 @@ export const useStyles = makeStyles((theme) => ({
     borderRadius: '16px',
     display: 'flex',
     flexDirection: 'column',
+
+    [theme.breakpoints.up('sm')]: {
+      minWidth: '343px',
+    },
   },
   titleModal: {
     color: theme.palette.white.main,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     paddingBottom: '24px',
+
+    [theme.breakpoints.up('sm')]: {
+      fontSize: '25px',
+    },
   },
   descriptionModal: {
     color: theme.palette.white.main,
@@ -35,6 +50,10 @@ export const useStyles = makeStyles((theme) => ({
     alignItems: 'center',
     justifyContent: 'center',
     paddingBottom: '24px',
+
+    [theme.breakpoints.up('sm')]: {
+      fontSize: '16px',
+    },
   },
   iconClose: {
     width: '20px',