Grid not responsive in Editor and real site

John2324 · September 28, 2023, 8:59am

Description:
Grid layout isn’t responsive. Editor preview does not reflect settings and actual display is also different.

Step-by-step reproduction instructions:

Open the Post Editor/Site Editor
Create grid with 2 columns
Add 2 fractions on desktop, 1 fraction on tablet, 1 on mobile

Screenshots, screen recording, code snippet

Environment info

WordPress version: 6.3.1
Cwicly Plugin version: 1.3.0.4

StrangeTech · September 28, 2023, 9:02am

Hi @John2324,

Also delete the additional block in the Grid Editor (number 2), so there is only one block remaining on tablet and mobile.

This should resolve your issue immediately.

John2324 · September 28, 2023, 9:13am

You mean this? This will delete my column with the content. I need it though

StrangeTech · September 28, 2023, 9:34am

Just delete it in the Grid Editor, not in the actual block editor:

JohnD · September 28, 2023, 9:41am

Hi,

Can you try reordering the items 1 - 2 to make sure they’ve been registered?

Best regards,
Johnny

John2324 · September 28, 2023, 9:55am

Hi,
Still not working, unfortunately.
Am I the only one to have the issue?

John2324 · September 28, 2023, 9:57am

This is what I do. But with auto-grid off, this will trigger the delation in the actual editor.
And with auto-grid on, I can remove it from the Grid Editor without deleting the actual column, but nothing changes

Araminta · September 28, 2023, 10:12am

Hi @John2324,

Sorry to hear you’re experiencing trouble with this.

As we have been unable to reproduce your error on our end, could you possibly provide a temporary access to this installation, so I may see what’s going wrong?

If this is possible, for security and privacy reasons, kindly send the details using our paste website, by sharing the link generated: https://paste.cwicly.com/ to support@cwicly.com or by PM.

Thank you in advance.

John2324 · September 28, 2023, 10:25am

sent, thank you for your help

Araminta · September 28, 2023, 11:20am

Thank you for the temporary access!

In fact what you are experiencing is caused by the breakpoint you have set for tablet view.

As the Gutenberg tablet view is set to 778px in the editor, if you set your breakpoint to something lower (like you did at 768px) you won’t ever see any changes being applied.

So be sure to set your tablet breakpoint to 778px or higher to avoid this issue.

Please let me know if this helps!

Moving this to general.