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, 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;
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?
I asked the same question yesterday, but I don’t find solution and it is very urgent task!
I really hope that you will help me!