Container- mobile

Hi there,

don’t set Row Gap.
The issue you have is becuase you have set the Max Height value of the Container Blocks.

See this for an example:

https://app.screencast.com/j0sDLZFH674lk

And here on Tablet:

https://app.screencast.com/Sj56TfblIKTL6

When you set a Max Height, that Container will not Grow to accomodate any change in height of the content inside.
So the content will overflow the container and overlap the content beneath it.

There is no need to set the Max Width sizes , and your should remove them

You have a lot of changes that need to be made:

Desktop setting changes:

1. Select the root container, remove min-height:421px.

2. Select the left parent container of the query loop block with 1 post, remove height:100%, set min-height:421px.

3. Select the right parent container of the query loop block with 4 posts, remove height:100%.

4. Select the post template container of the right query loop block, remove height:208px, set it to height:100%.

And as David said, do NOT set max-height, it will create overflow issue.

Once that’s done, let me know, so I can check the mobile settings.

Now select the Grid block of the right query loop, add a CSS class, eg. full-height-grid, then add this CSS:

.full-height-grid {
    height:100%;
}

Hi there,

Try adding this CSS:

@media (max-width: 768px) {
  .gb-grid-wrapper-aa991318 {
    margin-top: 380px;
  }
}

Have you added the code? Try viewing it on a real mobile device, the editor’s mobile view indeed shows no changes.

You don’t have to add the class gb-grid-wrapper-aa991318 there. The CSS already targets the overlapping container’s class.

This is the mobile full-page screenshot from my view. As you can see, there are no overlapping containers anymore.

https://postimg.cc/6THTq6zR

To ensure you’re seeing the latest changes, you might try clearing your cache.

Can you make sure all max-height values are removed? I’m still seeing those!
https://app.screencast.com/1phR7QSOBs5tF

And what do you think it’ll happen when max-height is set to 0? if you want to remove it, set it to unset instead of 0.
https://app.screencast.com/yK9lXPBkn6zkN