Layout column issue

[baysquentin]

Hi,
Since last update, I have a layout problem.
In the editor, everything looks fine, but the columns don’t display correctly in the pages.
I have this issue on several pages throughout the site.

Here’s an example :
In Cornerstone I have 3 columns in the same row :

On the page, the 3rd column is displayed below the first 2 columns

This example is on the Front page : https://capsurlaconfiance.ch

I tried to delete the cache.
I tried to set max width in the column setting. This works for a while, but then the layout breaks again…

How can I fix this ?

[prakash_s]

Hello @baysquentin,

Thanks for writing to us.

I checked your setting it seems that you have set the column layout as one column from the Row settings. I also noticed that you added 2 columns where you have added your content and you have set the one-column layout from the Row just because your one-column layout is rendering. I would suggest you add 3 columns and add the content there and then set the 3-column layout from the Row–>Layout–>Template or if you don’t want to add one more column I would suggest you set the column layout as 2 columns layout from the settings. Please have a look at the given screenshot in the secure note.

Thanks

[baysquentin]

Hi, thanks,
Maybe this wasn’t the best example as it uses several div inside the columns.
Here’s another example :

Coaching

Editor :

Frontend :

[prakash_s]

Hello @baysquentin,

I checked your given page URL it seems that there is an issue with broken HTML, I would suggest you go to the page and FAQ section and delete the 3rd row and then check it again. You must purge all the cache and browser cache then check it.

Thanks

[baysquentin]

I followed your instructions (delete the row and purge cache).
Nothing changed.
This issue is similar throughout the whole site. So I doubt that the problem is a specific row in a specific page…

[baysquentin]

I deactivated Gravity Forms (it was updated recently, about the same time as X / Cornerstone).
Now the issue seems solved… !!!
But this is still problematic if Gravity Forms doesn’t integrate with X…

[baysquentin]

I confirm, when I re-activate Gravity Forms, the layout is broken again…

[ruenel]

Hey @baysquentin,

Please enable back Gravity Forms plugin and then in your layout make sure not to insert a width in a Column element. For example this:

Setting the width of the Column element to auto will do just fine. And if you have set a width in a DIV element, you must set a maximum width especially if you use percentage unit.

Best Regards.

[baysquentin]

Ok, thanks, this seems to work…

[baysquentin]

Well, after a bit of editing a page, I get the same issue again…
On this page, I have all column width set to auto…

Working page

[ruenel]

Hey @baysquentin,

You can also set a maximum width in your Card element to make sure that it would not occupy the width wider than the column width itself.

Hope this helps.

[baysquentin]

Still not working.

I set the max width in Card element. It works and then, after I edit some elements, the layout breaks again.

Working page

[baysquentin]

I really need a solution here…
I tested again several times. Each time Gravity Forms is deactivated, the layout is displayed correctly, and each time Gravity is activated, the layout is broken…

[marc_a]

Hey @baysquentin,

Yes, you are right. The issue has something to do with Gravity forms. They are trying to remove the unit in the CSS that’s why it breaks the layout.

flex-basis: calc(37.17% - clamp(0px,var(--gap),9999px)); and the code should be flex-basis: calc(37.17% - clamp(0px,var(--gap),9999px));. They omit the unit pxin the clamp.

As you can see in the image below, if the clamp has the px unit. It is working correctly.

Is there an option you can contact Gravity forms regarding this issue? They might have hint on how we can move forward.

Hope that helps and let us know how it goes.

[baysquentin]

Hi, thanks a lot.

Here’s the reply from Gravity :

"The styles Themeco has identified as the source of the issue are NOT from Gravity Forms.

Gravity Forms doesn’t include inline styles like that, all our CSS is loaded from .css files located in the plugin folder."

How can I know where this comes from ?

[marc_a]

Hey @baysquentin,

I check your website and it seems that you have changed your layout because I don’t see the layout in your issue. Please let us know if you still have this issue.

On the other hand, I tried to replicate the layout in my development area and the gravity form plugin is enabled but I don’t see the issue. There might be some other reason why the CSS px unit was removed.

Please Let us know.

[baysquentin]

Hi,

Thanks for your follow up.
I think everything is ok now.

Gravity made an update, but I also found a weird html line in one text element.

I was able to fix my layout.

But I still don’t understand why the column elements are sometimes “pushed below” instead of staying on the same line. When all elements’ width of the row are set to “auto” I assumed that they should adapt to fit in the row template and stay on the same line.

I managed to keep the layout by setting maxwidth to force the elements to stay on the same line.

Quick question : can you explain to me the difference between “Auto” and “Grow” in the “Column Fill” setting of a row ?

Best regards,

Quentin

[tristup]

Hi @baysquentin,

Glad to know that you are able to fix it. To know more about the Column Fill attribute, please go through the following article.

CSS column-fill property

Hope it helps.
Thanks

[baysquentin]

Ok thanks, you can close this ticket

[tristup]

Hi @baysquentin,

You are most welcome.