Problems with getting grid columns at 50% to stack at 100% in mobile

HTML & CSS
1

I have created a grid based page where I have 2 columns at 50% width side by side (for comparison).

They work fine in a full sized screen buit in a mobile they are sqaushed side by side. I would like them to be stacked.

ind-mob-prob
ind-mob-prob1920Ă—1080 273 KB

The css code is:

 @media screen and (max-width:600px) {
        body {
              max-width: 98%;
              margin: auto;
         } 
          
          .grid-item1 {
              display: none;
             
          }
          
       .grid-container2 {
          
         max-width:100%;
          display: stack; 
          
        }

        .grid-container3 {
         
          max-width: 98%;
        }

        
        .grid-container4 {
        
           max-width: 98%;
        } 
        
        .grid-item3 {
            max-width: 98%;
        }
      
        
        .grid-item5 {
        
          max-width: 98%;
       } 
       
       
       }

In Html ther structure is:
<div class="grid-container3">
        <div class="grid-item4">
-<p> text </p>

 <div class="grid-item4b"></div>
</d>
</div>

 <div class="grid-container4"> 
     <div class="grid-item5"> 
 <p> text</p>

 <div class="sm-ban2">
<p>text</p>
</div>
</div>
</div>

If I put an extra div above container4 the mobile version displays 1 single coloumn. Unfortunately, so does the full size page.

I have tried stack but I think that that isn’t needed nowadays.
What do I need to do to put this right?

website link

2

In your media query, just change the template columns to be one column…

grid-container3 {
grid-template-columns: 100%;
}

It’s now one column :smiley:

3 Likes
3

Thanks. It works.

I did try this in the body section in the css file but it didn’t work. I never thought of trying in the specific tables.

4

It wouldn’t because grid doesn’t cascade. It only works on the specific element it’s applied to.

2 Likes