Archived topic
Grid Container Margin Problem in Editor
15 replies · Started by Marius on February 10, 2022
as you can see in the screenshot, i have margin bottom 10 under the grey container in mobile view. So i have the white line between grey and blue container.
But in preview mobile this margin is not there.
why is that and how to change?
Hi Sonja,
I'm not sure I understand your question, look like the 10px bottom margin is there:
https://www.screencast.com/t/inuBMuPQD7L
If it's not the case, can you publish the page and link us to the page?
Let me know if I miss anything :)
Hi Ying,
The Page i a draft, so i can not link to it.
Like i said, in editor i see the 10 px, but not on live site (preview)
https://prnt.sc/26t3my1
I have to see the live site code to be able to tell what the cause is Unfortuanly.
Can you provide admin access so I can inspect the preview?
Okay. How can I give you Admin Access?
You can use the private info field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
okay, i have done that. It is the first draft post.
It requires another set of login before the WP login:
https://www.screencast.com/t/4NN88BqCoDM
Can you also provide that? Thanks!
Ah, sorry, here it is
It's difficult to explain as the HTML structure is slightly different between editor and the front end, so the same CSS would have different effect.
In your case, the gap should be added to the Gridblock (vertical gap) not the container block inside it, and you can click on the blue container to remove its vertical gap.
Hmmm, I do not think I understand correctly. My goal is, that on Desktop View it should leave at it is.
But on Mobile, there should be no space between the image and the grey text box, but there shoul be space between each of the element.
, there should be no space between the image and the grey text box, but there shoul be space between each of the element.
That's what I thought.
Have you tried my suggestion?
1. Add 10px vertical gap to Grid:
https://www.screencast.com/t/sgRDKgPRc
2. Remove the vertical gap for the blue container:
https://www.screencast.com/t/cgpt3kkF
Okay, i have done so and it worked. Thanks. But I don't understand why we first add gap and then remove it, to get the result.
When the vertical gap is activated, all the containers in the grid will be added the vertical gap.
Then you can remove vertical gap for individual container.
Imagine if you have 6 containers in the grid and you only need one of them has no vertical gap, the way we set in GB would work much more efficiently than trying to add vertical gap to each container 5 times.
okay, that makes sense. Thanks for explaining.
