consider the following code:
<div className="mx-md-4 my-5 mx-sm-0 mx-xs-0 flex-column align-items-center d-flex justify-content-center ">
<Grid className='mt-3' container spacing={2}>
<Grid className='mt-4' item md={4} sm={12} xs={12}>
<img src={props.src} className='rounded' alt="" />
</Grid>
<Grid className='mt-4' item md={8} sm={12} xs={12}>
<div className="container d-flex">
<h3 className=' mt-4 mb-5'><strong>{props.title}</strong></h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eum provident alias, ipsa unde quidem perferendis inventore harum quibusdam placeat odit architecto ad deserunt dignissimos vero ipsam voluptates? Excepturi magnam eveniet odit! Quam numquam culpa eaque vel, cupiditate expedita harum, labore explicabo molestiae molestias fuga laboriosam, itaque sed incidunt soluta eos repellat autem repudiandae praesentium. Consectetur esse praesentium harum tempore!</p>
<h5 className="mt-4 text-secondary">Service Hours</h5>
<h5 className="mt-2 text-danger">7:00 AM - 8:00 PM</h5>
</div>
</Grid>
</Grid>
</div>
The items are overlapping at around 1000px width:
items overlapping
anyone know why this is happening and how to fix it?
The image inside the first grid element is overflowing. You need to give maxWidth: 100%. You can use any preferred way to style this as per MUI.
Here's a working code at codesandbox
import React from "react";
import ReactDOM from "react-dom";
import { Grid } from "@material-ui/core";
function App() {
return (
<div className="mx-md-4 my-5 mx-sm-0 mx-xs-0 flex-column align-items-center d-flex justify-content-center ">
<Grid className="mt-3" container spacing={2} md={12}>
<Grid className="mt-4" item md={4} sm={12} xs={12}>
<img
src="https://cdn.vox-cdn.com/thumbor/PElDiTTBj78Dr2d9JH-nwYhQl5s=/0x0:2040x1360/1820x1213/filters:focal(857x517:1183x843):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/69587844/acastro_210104_1777_google_0001.0.jpg"
className="rounded"
style={{ maxWidth: "100%" }}
alt=""
/>
</Grid>
<Grid className="mt-4" item md={8} sm={12} xs={12}>
<div className="container d-flex">
<h3 className=" mt-4 mb-5">
<strong>Lorem Ipsum</strong>
</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Temporibus eum provident alias, ipsa unde quidem perferendis
inventore harum quibusdam placeat odit architecto ad deserunt
dignissimos vero ipsam voluptates? Excepturi magnam eveniet odit!
Quam numquam culpa eaque vel, cupiditate expedita harum, labore
explicabo molestiae molestias fuga laboriosam, itaque sed incidunt
soluta eos repellat autem repudiandae praesentium. Consectetur
esse praesentium harum tempore!
</p>
<h5 className="mt-4 text-secondary">Service Hours</h5>
<h5 className="mt-2 text-danger">7:00 AM - 8:00 PM</h5>
</div>
</Grid>
</Grid>
</div>
);
}
ReactDOM.render(<App />, document.querySelector("#app"));