[Resolved] Trouble with heights on images/content in columns at all screen widths

[Ria]

I’m rebuilding my website using GP to move it away from the clunky, heavy page-builder type theme (Enfold) it’s using now. Everything is going great so far, except for trying to do the columned layout for my portfolio item pages.

The Enfold theme on my current site keeps those columns at an even height as the screen width goes down to tablet size from desktop size.

But, even though I’ve tried everything I can think of, I can’t make this same thing happen using the GP theme, either with Tom’s ‘Lightweight Grid Columns’ plugin or without (just using divs and css).

The GP columns don’t resize evenly, and even though I’ve applied a color style to each column, the color doesn’t extend past the images, so I end up with a blank white gap under the image in one column as it shrinks, rather than sizing down the image in the other column to match.

I have screenshots to illustrate this. (The new site is being built on a pw-protected private dev server.)

The page I’m trying to build – a recreation of the layout of the existing page on my Enfold site – consists of “Sections” and each Section contains a combination of either 2 images side by side in columns, of varying widths (not random widths, but specifically chosen widths based on my layout) some 50/50 some 60/40 etc. as well as images + text side by side in columns of varying widths I choose.

The GP page is not perfect on desktop either, but I can get things looking ok on desktop with a lot of extra work changing existing image sizes and adding classes and specific paddings for everything. But it all falls apart when the screen width changes. (Mobile size is fine since they all go to 100% wide.)

I tried adding equal_heights = “false” to the LGC shortcodes and that didn’t fix anything. I tried to use some straight HTML/CSS with bootstrap grid styles, and also tried that using some flex box css styles. A lot of hand coding work, but no matter what I try I still get the same issue or I realize it will take a ton of added CSS/HTML work. 🙁

Is there a relatively easy solution to this? I don’t want to add yet another plugin or a ton of extra custom CSS. The goal was to lighten up my site. I could possibly use the existing CSS that comes with GP Premium and the GP plugins I already have?

I have a feeling that part of the reason that Enfold theme is so “heavy” is due to something they’ve baked into the theme that makes that column magic happen.

[Leo]

Hi there,

Actually just answered a similar question here: https://generatepress.com/forums/topic/grid-content-sizes/

Any chance you’ve already tried that tutorial but couldn’t get it to work?

[Ria]

Thanks, Leo – but that code doesn’t do 100% of what I need. It’s a good start, though.

[Tom]

Any chance you can re-open your link above so I can take a look at how it’s looking now? I might be able to help with the rest 🙂

[Ria]

Hi Tom,

Thank you! I’d be so grateful if you could take a look or help me to accomplish this!

I tested the code that Leo gave me on my local server, so it’s not been applied to the site I’m building on the staging server. The URL/pw and admin access to the staging server that I emailed to you last week are still the same – or I can resend to you if you’d like to take a look?

[Tom]

Absolutely! Send away: https://generatepress.com/contact/

[Ria]

Thanks! I’ll email you.

[Ria]

Just following up to let anyone who may have a similar problem know what worked: Rather than use the LGC shortcodes, I hand coded my own custom HTML (rows and divs) that uses my own custom Flexbox css styles from a style sheet that I enqueued to load only for these cpt portfolio single pages. The flexbox based html code is minimal, lightweight, easy and quick to apply into the page sections, and gives the exact results I needed.

Thanks again Leo and Tom for your input!

[Leo]

Glad you got flexbox working 🙂

Thanks for sharing!

[Author]

Posts