Encountering an issue while using the Grid Component in my React JS Project. Let's delve into some code and then I'll explain what I aim to achieve with images:
Assuming this is the rendered code:
<div style="margin:100px 20%; width:80%" >
<Grid container>
<Grid item xs={6}>
<MyElement
contentLeft="Something displayed in the left"
contentRight="Something displayed in the right"
>
</Grid>
<Grid item xs={6}>
<MyElement
contentLeft="Something displayed in the left"
contentRight="Something displayed in the right"
>
</Grid>
</Grid>
</div>
Imagine it looks like this (with My Grids in Red and the big div in black):
https://i.sstatic.net/zuKqv.jpg
Upon resizing the window to a smaller size, the appearance changes as shown here:
https://i.sstatic.net/zqHD4.jpg
I suspect the issue lies within my custom Element due to its CSS styling. However, I am unsure how to adjust the Grid attributes so that 'xs' changes from 6 to 12 at a certain point.
Is there a way to achieve this? If not, are there any alternative solutions?
Any assistance on this matter would be greatly appreciated.