A React component utilizing Material-UI (MUI) has been created and I am working on making it mobile responsive. The current appearance is as follows:
https://i.stack.imgur.com/8z0T8.png
My goal is to have it look like this:
https://i.stack.imgur.com/L8gjo.png
The relevant code for the component is shown below:
import React from 'react';
import {
Box, Typography, Paper, Rating, Avatar,
} from '@mui/material';
type CarInfoProps = {
title: string;
imageUrl: string;
rating: number;
comments: string[];
};
const CarInfo: React.FC<CarInfoProps> = ({
title, imageUrl, rating, comments,
}) => {
return (
<Box
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="center"
height="100vh"
>
<Paper elevation={3}
style={{
padding: '16px', display: 'flex', flexDirection: 'column', alignItems: 'center', height: '980px', width: '955px',
}}>
<Typography variant="h5" gutterBottom style={{ textAlign: 'center' }}>
{title}
</Typography>
<Avatar alt={title} src={imageUrl} style={{ marginTop: '16px' }} />
<Box style={{ marginTop: '16px' }}>
<Typography variant="body1">Car Info:</Typography>
{/* Add additional car information here */}
</Box>
<Box style={{ marginTop: '16px' }}>
<Typography variant="body1">Rating:</Typography>
<Rating value={rating} readOnly />
</Box>
<Box style={{ marginTop: '16px' }}>
</Box>
</Paper>
</Box>
);
};
export default CarInfo;
Despite trying various methods, achieving the desired mobile responsiveness remains a challenge. Seeking assistance on structuring the styles or any MUI-specific considerations needed to meet the desired mobile layout.
I inquired about the same issue yesterday but was unable to find a solution.