[Resolved] collapse empty containers in mobile

[Yola]

Hi GP team,

I made a ‘table’ using GB grid for rows, with 6 containers in each row. Some ‘cells’ are empty and still tak eup the same column space, which is great (in an earlier attempt the empty containers took up no space, ruining the table).

This looks good in desktop and tablet. On mobile this becomes 1 column, which is fine for this table.

Except that the empty containers take up space and in this case it leaves quite a few gaps affecting vertical spacing, which doesn’t look good.

Is there a way to make empty containers collapse on mobile?

I searched the forum but couldn’t find a solution, mostly collapse comes up with accordeons and menus, but in this case it’s only the empty containers that should collapse.

Thank you for pointing me in the right direction,

Yola

PS I’m a great fan of GP, recently also discovered some very useful GP videos. GP has helped me in many ways to create better sites.

[Fernando]

Hi Yola,

For reference, can you share the link to the site in question? We’ll check the empty Containers on the frontend. It should be possible to hide them if they’re empty.

[Yola]

Thanks for your quick response Fernando, the site is not yet online but I’ll supply login credentials. It is a very simple table: 5 rows of 6 containers.

[Fernando]

I tried the credentials but they didn’t work. Can you check if it’s working?

[Yola]

Hm, I tried an dit worked, perhaps there was a typo in my previous message, sorry for the inconvenience

[Fernando]

That’s odd. It’s still not working from my end.

I’m copying and pasting the credentials you shared here.

Can you try replacing the password?

[Yola]

Here goes. I tried again, twice, with earlier password, and just now with the new one – all works.

[Fernando]

It’s working now. Thank you!

Can you try adding this CSS through Appearance > Customize > Additional CSS?:

.entry-content .gb-container p:is(:empty) {
    margin-bottom: 0;
}

Let us know how it goes.

[Yola]

Yes! It looks as if this did the trick, thank you very much!! Glad to know this can be done, looks much beter now.

Bed time here, goodnight!

Yola

[Fernando]

You’re welcome, Yola!

[Yola]

[Fernando]

Hi Yola,

Is there anything we can help you with?

[Author]

Posts