[Resolved] Get Lightweight Grid Columns to adjust height based on content

[Theo]

Hi, I am using Lightweight Grid Columns and generally like it a lot. However, I ran into the following issue that so far has befuddled me:
I have a simple 2-column setup where the left columns contains a shortcode, pulling in a few images from an Instagram feed. That shortcode already defines a fixed height of 250 px. The right column just contains some text and a button, so it does not have a big height by default. No matter if I set equal_heights to true or false, the two columns get sized to the height of the “text” column, ignoring the fixed height of the instagram-pictures plugin, which now obtains a scroll bar… 🙁

Apart from adding huge paddings to the “text” column, is there a proper way to get the “instagram” column re-size itself based on the contained pictures?

[Theo]

P.S. I tried adding a style=”height:300px;” in the column shortcode. No go. style=”min-height:300px;” also didn’t do the trick.

[Theo]

Ah, found it. The only combination that I did not try: remove the fixed height from the instagram shortcode so it will expand AND set equal_heights to false for the Lightweight Grid Columns.

[David]

Sounds like you found the solution. thanks for updating.

[Theo]

Hi David,

I was too quick… Not resolved completely yet. I hope you can lend a hand still. This is a page using Sections. When I add a section below this 2-column section with equal_heights set to false, somehow the lgc-clear does not seem to be respected for screen widths below 1025px. Even when first adding a full-width section (no columns) with a background color, as soon as screen width goes below 1025 px, the new colored section actually moves behind the 2-column section above.

Once the screen becomes “mobile size”, all columns stack and everything is ok. Once the screen is wider than 1025px, everything is fine too.

I don’t see a relationship with my container at 900px, so I’m stumped. Would you be able to help?

[David]

Not a problem, give this solution a shot:

https://generatepress.com/forums/topic/responsive-background-in-sections-and-grid-columns-in-tablet-mode/#post-588503

[Theo]

Thanks a lot, David. That did the trick!

[David]

Glad to be of help!

[Author]

Posts