Don't display schedule background image on mobile

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>