Two columns - Same Height. Stretch doesn't work?

We have a layout atop this page (https://upriseri.com/ri-news-2/) with one column on the left with a bg image, and a column on the right with 3 nested rows, each with a bg image and overlaid text. We’ve tried setting either column to stretch, which usually works in ensuring both column are the same length regardless of the content but it does nothing in this instance. Not sure what we’re doing wrong here?

Hi @co50,

Thanks for reaching out.
I have checked and found the problem you have pointed out. You need to set the nested Row height to 100% and then all the inner Row height to 33.33% so it covers the full height. Please remember that it may require some customization, so if you are not proficient I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Hope it helps.
Thanks

Yes, that’s why I reached out. We’ve tried every possible way you would set these rows to be even including that method and it does not work. Pro doesn’t let you set row height in the controls so we did it using the Element CSS and it’s just ignored. It doesn’t even appear when you inspect the element (I’ve cleared cache and should note it doesn’t affect anything in the editor either which typically responds in realtime).

Hey @co50,

Technically speaking if you stretch the column it will match up with the highest column height. That being said, would you mind sharing your admin credentials so that we can check your setup properly? To do that, please give us the following information in a Secure Note.

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

I agree that’s why I cannot figure out why it isn’t doing that. Secure Note entered.

Hello @co50,

Actually, both Columns are of the same height. The contents of this column though which is a nested Row element did not occupy the whole height of the column. You may need to set the minimum height of the Row element to 100%.

By the way, we cannot check your page in Cornerstone because the given user has very limited privileges. Please change the role as an Admin instead.

Thanks.

This account provided in the secure note is an administrator account with full privileges.

Your suggestion was tried already. Every possible CSS configuration that could be used to even these columns has been attempted and none of it works. We encounter this occasionally where Pro simply ignores CSS parameters and usually reloading the page fixes it, but not this time.

Hello @co50,

With the Row/Column elements, you will be limited. I would recommend that you use the Grid element instead.
Check out the link to the demo I have created for you in the secure note.

Best Regards.

Hey @co50,

You have withdrawn your reply. The issue must have been resolved already.

Cheers.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.