I have a React component created using Material-UI (MUI) that I’m trying to make mobile responsive. Currently, it looks like this:
But I want it to look like this
Here’s the relevant code for the component:
import React from 'react';
import {
Box, Paper, useMediaQuery, useTheme, Typography, Grid, Container, Accordion, AccordionSummary, AccordionDetails, Rating,
} from '@mui/material';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormGroup from '@mui/material/FormGroup';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { Link } from 'react-router-dom';
import LocationOnIcon from './SVGiCON';
export const CarInfo: React.FC = () => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const [state, setState] = React.useState({
gilad: false,
jason: false,
antoine: false,
});
const [expanded, setExpanded] = React.useState(false);
const [ratings, setRatings] = React.useState<number[]>([4, 5, 3, 4.5]);
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setState({
...state,
[event.target.name]: event.target.checked,
});
};
const handleExpandToggle = () => {
setExpanded(!expanded);
};
const { gilad, jason, antoine } = state;
const [value, setValue] = React.useState<number | null>(2);
return (
<Container>
<Box
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="center"
height="150vh"
>
<Paper
elevation={3}
sx={{
p: 3,
borderRadius: 2,
textAlign: 'center',
maxWidth: isMobile ? '100%' : 'xl',
width: '1100px',
height: '1000px',
backgroundColor: 'grey !important',
}}
>
{/* Car Title */}
<Typography variant="h4" gutterBottom color={'white'}>
Car Title
</Typography>
<Grid container spacing={2} alignItems="center" justifyContent="center">
<Grid item xs={12} md={6} lg={6} xl={6}>
{/* Add your car details here */}
<Typography variant="body1" align="left">
Собственик{' '}
<Link to="/home" style={{ textDecoration: 'none', marginLeft: '10px' }}>
<span style={{
color: 'black', backgroundColor: 'green', borderRadius: '50px', padding: '10px',
}}>
Александър Иванов
</span>
</Link>
</Typography>
<Typography variant="body1" align="left" style={{ marginLeft: '40px', marginTop: '20px', marginBottom: '20px' }}>
<LocationOnIcon style={{ marginRight: '10px', width: '15px', height: '15px' }} />
Костинброд, София-област
</Typography>
<Typography variant="body1" align="left" style={{ marginLeft: '40px' }}>
Детайли за колата:
</Typography>
<Typography variant="body1" align="left" style={{ marginLeft: '40px' }}>
<LocationOnIcon style={{ marginRight: '10px', width: '15px', height: '15px' }} />
Бензин
</Typography>
<Typography variant="body1" align="left" style={{ marginLeft: '40px' }}>
<LocationOnIcon style={{ marginRight: '10px', width: '15px', height: '15px' }} />
Черен
</Typography>
<Typography variant="body1" align="left" style={{ marginLeft: '40px' }}>
<LocationOnIcon style={{ marginRight: '10px', width: '15px', height: '15px' }} />
2022 г.
</Typography>
<Typography variant="body1" align="left" style={{ marginLeft: '40px' }}>
<LocationOnIcon style={{ marginRight: '10px', width: '15px', height: '15px' }} />
90 000 км
</Typography>
<FormGroup style={{ marginLeft: '40px', marginTop: '11px' }}>
<FormControlLabel
style={{ marginBottom: '-10px', color: "black" }}
control={
<Checkbox
checked={gilad}
onChange={handleChange}
name="gilad"
size='small'
style={{ color: 'black' }} />
}
label="Реален пробег"
/>
<FormControlLabel
style={{ color: "black" }}
control={
<Checkbox checked={jason}
onChange={handleChange}
name="jason"
size='small'
style={{ color: 'black' }} />
}
label="Първи собственик"
/>
</FormGroup>
</Grid>
{/* Car Image (on the right for larger screens) */}
<Grid item xs={12} md={6} lg={6} xl={6}>
{/* Add your image component here */}
<img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Car" style={{ width: '482px', height: '279px', marginRight: '50px' }} />
</Grid>
</Grid>
<Typography variant="body1" align="left" style={{ marginLeft: '40px', marginTop: '40px' }}>
Лиценз
</Typography>
<Grid container spacing={2} alignItems="flex-start" justifyContent="center">
<Grid item xs={12} md={6}>
<Box
sx={{
position: 'relative',
width: '100%',
paddingTop: '56.25%', // 16:9 aspect ratio (modify as needed)
overflow: 'hidden',
}}
>
{/* Add your car details here */}
<img src="https://images.pexels.com/photos/533669/pexels-photo-533669.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Car"
// style={{
// width: '454px', height: '331px', marginLeft: '40px', marginTop: '20px',
// }} />
style={{
position: 'absolute',
top: 20,
borderRadius: 0,
left: 40,
width: '100%',
height: '100%',
objectFit: 'cover', // or 'contain' depending on your preference
}} />
</Box>
</Grid>
{/* Car Image (on the right for larger screens) */}
<Grid item xs={12} md={6} lg={6} xl={6} container style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
{/* Add your image component here */}
<Typography variant="body1" align="left" style={{ alignSelf: 'flex-start', marginTop: '20px' }}>
Линк към документа{' '}
</Typography>
<Typography variant="body1" align="left" style={{ alignSelf: 'flex-start', marginTop: '20px', wordBreak: 'break-all' }}>
<a href="https://en.wikipedia.org/wiki/Vehicle_registration_certificate#/media/File:1917_auto_registration_license.jpg" target="_blank" rel="noopener noreferrer">
https://en.wikipedia.org/wiki/Vehicle_registration_certificate#/media/File:1917_auto_registration_license.jpg
</a>
</Typography>
</Grid>
</Grid>
<Grid item xs={12} md={6} lg={6} xl={6}>
{/* ... (Existing code) ... */}
{/* Expandable Rating Section */}
<Accordion expanded={expanded}
onChange={handleExpandToggle}
style={{
marginTop: '20px', width: '400px', textAlign: 'left', marginLeft: '40px', backgroundColor: 'transparent',
}}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1bh-content"
id="panel1bh-header"
>
<Typography variant="body1">Рейтинг</Typography>
</AccordionSummary>
<AccordionDetails>
<div>
<Rating name="read-only" value={value} readOnly size="large" />
</div>
<div>
<Rating name="read-only" value={value} readOnly size="large" />
</div>
</AccordionDetails>
</Accordion>
</Grid>
<Grid item xs={12} md={6} lg={6} xl={6}>
{/* ... (Existing code) ... */}
{/* Expandable Rating Section */}
<Accordion expanded={expanded}
onChange={handleExpandToggle}
style={{
marginTop: '20px', width: '400px', textAlign: 'left', marginLeft: '40px', backgroundColor: 'transparent',
}}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1bh-content"
id="panel1bh-header"
>
<Typography variant="body1">Коментари</Typography>
</AccordionSummary>
<AccordionDetails>
<div>
<Rating name="read-only" value={value} readOnly size="large" />
</div>
<div>
<Rating name="read-only" value={value} readOnly size="large" />
</div>
</AccordionDetails>
</Accordion>
</Grid>
</Paper>
</Box>
</Container>
);
};
export default CarInfo;
I’ve tried a lot of different things, but I’m facing challenges achieving the desired mobile responsiveness. Can someone provide guidance on how to structure the styles or any MUI-specific considerations to achieve the desired mobile layout?
Any help or suggestions would be greatly appreciated. Thank you!