Use media queries css to fix Teks positions

components/teks/teks.js

@@ -30,10 +30,9 @@ const classes = {
   pataje: `${PREFIX}-pataje`
 }
 
-const Root = styled('div')(props => ({
+const Root = styled('div')(() => ({
   [`&.${classes.container}`]: {
     marginTop: '3em',
-    marginLeft: props.isMobile ? '' : '240px',
   },
 
   [`& .${classes.gridText}`]: {
@@ -46,7 +45,15 @@ const Root = styled('div')(props => ({
   [`& .${classes.pataje}`]: {
     position: 'absolute',
     zIndex: 9999
-  }
+  },
+
+  '@media (max-width: 600px)': {
+    marginLeft: '0',
+  },
+
+  '@media (min-width: 600px)': {
+    marginLeft: '240px',
+  },
 }))
 
 const langToArray = parole => {
@@ -114,7 +121,7 @@ export default function Teks({parole}) {
   }, [])
 
   return (
-    <Root isMobile={isMobile} className={classes.container}>
+    <Root className={classes.container}>
       <Box sx={{textAlign: 'center', marginTop: 1}}>
         <Typography variant='h4' component='div' display='block' marginBottom={2}>
           <Typography gutterBottom variant='h6' component='div'>
@@ -158,7 +165,7 @@ export default function Teks({parole}) {
           <DiferansDialog difference={parole.difference} />
         )}
       </Box>
-      <Grid container justifyContent='start' spacing={1}>
+      <Grid container justifyContent='center' spacing={1}>
         <Grid xs={12} md={langArray.length > 0 ? 6 : null}>
           <Box className={classes.gridText}>
             <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>