Solved Only on mobile: equalize column heights not working

Hello there,

this issue has been challenging me the whole afternoon.

The site: myguido.info/laudersbach

I tried to create columns with equal height (also on mobile). At the desktop computer, everything looks just fine.
But when I switch to mobile, the column on the right hand side is always slightly higher.
(See "Restaurant" or "Well & Fit")

Ideally, I want to have a solution without defining a fixed height.

What I did to have the columns side by side on mobile:
CSS of the Row --> Advanced -->
display: flex!important;

Now they are next to each other but they don't have the same height :-(
I did some research online: Steps I already tried but did not help:

1) align-items: stretch;
2) I already deleted the background images from the elements itself and moved them to the columns.


Thanks for your suggestions!

Jaga

 

Update: it should work now.

What i did:
Set the magin-bottom of the left column to 0px (!important)

For some reason, the settings of the left column were not the same even though I duplicated them...

Maybe you share your thoughts about the result... thx.