diff options
Diffstat (limited to 'client/src/components')
| -rw-r--r-- | client/src/components/Schedule.tsx | 10 |
1 files changed, 6 insertions, 4 deletions
diff --git a/client/src/components/Schedule.tsx b/client/src/components/Schedule.tsx index 554674b..a0938a8 100644 --- a/client/src/components/Schedule.tsx +++ b/client/src/components/Schedule.tsx @@ -1,9 +1,10 @@ import React from 'react'; -import { Paper, Typography, useTheme } from '@mui/material'; +import { Paper, Typography, useMediaQuery, useTheme } from '@mui/material'; import divineShepherd from '/divine-shepherd.jpg'; function Schedule() { const theme = useTheme(); + const isMobile = useMediaQuery('(max-width: 768px)'); return ( <div style={{ @@ -11,7 +12,7 @@ function Schedule() { display: 'flex', justifyContent: 'center', alignItems: 'center', - backgroundImage: `url(${divineShepherd})`, + backgroundImage: `url(${isMobile ? 'none' : divineShepherd})`, backgroundSize: 'cover', }} > @@ -19,12 +20,13 @@ function Schedule() { style={{ display: 'flex', justifyContent: 'center', - width: '95%', + width: '90%', }} > <Paper elevation={3} sx={{ + borderRadius: '16px', width: 512, px: 2, }} @@ -40,7 +42,7 @@ function Schedule() { <hr style={{ width: '100%' }} /> <div style={{ display: 'flex', alignItems: 'center' }}> <div style={{ width: '35%' }}> - <p>3:00 PM</p> + <p>2:00 PM</p> </div> <div style={{ width: '65%' }}> <Typography variant="h6">Ceremony</Typography> |