CODEWITHSUNDEEP
cssreactjsresponsive-designmaterial-ui
TaouBen
TaouBen

Reputation: 1315

Responsive Design Problem while using Grid Material UI?

I am having a little problem using Grid Component in React JS Project, I will start by writing some code and explain after what I want to achieve using images :

let say that this is the code rendered : 

 <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>

And here is how it looks let's say ( My Grids in Red and the big div in black ) :

enter image description here

When I resize my window and make it smaller this is how it looks :

enter image description here

I know there is a problem in my proper Element and it is easy because I made its CSS, but I dont know how to control Grids attribute now, because I want that the xs changes from 6 to 12 at a certain position.

How to do so ? if it is not possible, is there a better solution ?

Any help would be much appreciated.

Upvotes: 0

Views: 7227

Answers (1)

Jeremiah McCurdy
Jeremiah McCurdy

Reputation: 612

Depends on what size you want it to break from 6 to 12, but it's as simple as putting the right prop values in:

<Grid item xs={12} sm={6}>

Be sure to read the full use case here: https://material-ui.com/layout/grid/

Upvotes: 3

Related Questions