Adjust columnheight to content…

[roelvanhouten]

Hello,

I’m currently in the process of replacing all the classic sections of a website with new sections. This is because the background-images (with parallax-effect) of the classic section are not displaying properly on mobile.

I only have one issue: I used to have two columns of unequal height, but I can’t get the same result with the new section-elements. The columns are automatically the same height. Is there away to achieve the same effect as with the classic section elements? I’ve included two screenshots.

Kind regards,
Roel

[tristup]

Hi Roel,

Thanks for reaching us.

Seems you are setting the background color to the Columns and that is why this output is coming up.
I would suggest you to set the background color to the text elements, which actually contains the content.
I have tested the same in my local setup and here is what I am getting.

If this not able to resolve you issue, please provide the details of your site in a secure note, including:

– Link to your site
– Specific page URL
– WordPress Admin username / password

To create a secure note, click the key icon underneath any of your posts.

Hope it helps.

Thanks

[roelvanhouten]

Hi, thank you for the reply.

That does kind of solve my problem, however, it introduces two new problems…

1. I’m using classic text areas everywhere. To change the background color, I’d have to change them all to new text areas. There are approximately 30 of these pages that I have to change, so that’s going to be a lot of work
2. I’m also using classic custom headlines (and I can’t change it to new headlines, because of the ‘accent’) and classic list items. I don’t think it’s very easy to add padding and background color to those items?

Kind regards,
Roel

[tristup]

Hi Roel,

I understand your situation, but to achieve the exact design you may need to change a few things.
Here I tried to show you an example through which it can be achieved with minimum changes.
I used the headline and classic text to replicate your one.

Please find the steps below :

1. Add a Section with background color.
2. Add a Row with 2 columns.
3. Add an inner row into each column.
4. Set the background color of the inner row.
5. Add the elements which you want.

Screenshot 1: Output in browsers.
Screenshot 2: Builder Structure of Section.

Hope it helps

Thanks

[roelvanhouten]

Thanks! I’m going to try that. Once I have this working, I’ll make a template.

[tristup]

Hi Roel,

Please let me know if it works.

Thanks

[roelvanhouten]

Yes, I’ve tried. This will work just fine!

[marc_a]

@roelvanhouten,

It’s our pleasure to help you.

Thank you.