Overflow error on Grid Cells

[saltydog]

I have an issue with my projects page on my site:

Projects - Motion Jelly

Specifically for smaller screens (mobile and ipad breakpoints)

The grid elements go outside of the column/row/section and encroach into the footer.
It might not be obvious from the image, but some text from the footer is overlapping the bottom of the image from the grid.

I am not sure how to fix this issue.
Please advise.

[tristup]

Hi @saltydog,

Thanks for reaching out.
I have checked your website on my Android mobile device and also checked by resizing the browser window size, but didn’t find the issue you described here. Are you getting this problem only in the Page Builder? If so, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[saltydog]

The issue is still there. I’m seeing it on mobile on multiple browsers. Not just in the Page Builder.
It might not be immediately obvious, but the grid is overlapping the next section which has text and a button. Sorry, it’s not overlapping the footer as I previously said.

[tristup]

Hi @saltydog,

If you are still having this issue, please mention the device, browser name and version, and also the operating system you are using. That will help us replicate the issue at our end.

Thanks

[saltydog]

Hi,

I am getting the problem on my iphone Xs on Safari, Firefox and Chrome.
I am also getting the issue on my PC on Firefox and my mac on Firefox and Safari.
The issue does not present itself on Chrome on my PC or mac, so it does seem to be device/browser specific.

Here is an image to see the correct display on the left(chrome) and the incorrect version on the righ(safari).

[saltydog]

@tristup, could you please let me know how I can fix this issue that appears on some browsers. See previous post.

[ruenel]

Hello @saltydog,

Please check if you have set any height to your Grid or Cell elements. It would also be great if we could check your element settings too. Please provide with us your WP details so we can check and investigate this further. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[saltydog]

Hi @ruenel, Secure Note to follow…

[ruenel]

Hello There,

I could not replicate your issue. This is what I am seeing on my browser.

Does this happen on a specific browser? What browser and in what device?

Thanks.

[saltydog]

Hi @ruenel.

As mentioned previously in the post, I am getting the problem on my iphone Xs on Safari, Firefox and Chrome.
I am also getting the issue on my PC on Firefox and my mac on Firefox and Safari.
The issue does not present itself on Chrome on my PC or mac, so it does seem to be device/browser specific.

Here is an image to see the correct display on the left(chrome) and the incorrect version on the righ(safari).

[saltydog]

Any progress on this @ruenel?

[saltydog]

Hi @ruenel. Any progress on this?

[saltydog]

@ruenel, @tristup, any progress on this?

[ruenel]

Hey @saltydog,

One thing I noticed is that the DIV is sometimes wrapping the Headline element and sometimes it is on the outside.

Please double check your element structure again.

[saltydog]

I managed to resolve the issue by creating a new grid element and transfering all the existing cells to it.
I’m not sure where the issue came from, but it must have been a setting in the grid element.
Thanks for your help.
Sean.

[tristup]

Hi @saltydog,

Glad to know that the issue is resolved now.

Thanks