Use media queries css to fix Teks positions

components/teks/denye-teks.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
 import Container from '@mui/material/Container'
 import Grid from '@mui/material/Unstable_Grid2'
 import Typography from '@mui/material/Typography'
-import useMediaQuery from '@mui/material/useMediaQuery'
 
 import {styled} from '@mui/material/styles'
 
@@ -16,19 +15,24 @@ const classes = {
   container: `${PREFIX}-container`
 }
 
-const Root = styled('div')(props => ({
+const Root = styled('div')(() => ({
   [`&.${classes.container}`]: {
     marginTop: '4em',
     marginBottom: '2em',
-    marginLeft: props.isMobile ? '' : '240px',
-  }
+  },
+
+  '@media (max-width: 600px)': {
+    marginLeft: '0',
+  },
+
+  '@media (min-width: 600px)': {
+    marginLeft: '240px',
+  },
 }))
 
 export default function DenyeTeks({denyeTeks}) {
-  const isMobile = useMediaQuery('(max-width:600px)')
-
   return (
-    <Root isMobile={isMobile} className={classes.container}>
+    <Root className={classes.container}>
       <Container align='center'>
         {denyeTeks.length === 0 && (
           <Container sx={{marginTop: 2}} align='center'>