Solved Buttons and Columns Mobile Optimisation

Dear Divi Helpers,

now that our website is live www.sailover.net I have noticed that many features on mobile appear quite differently from the preview on DIVI and also on any desktop browser shrunk to the minimum width.

I have a general question then: what do you use to do cross device and browser testing? Is there any free tool available?

I would also share with you two issue:

Issue 1 related to buttons that become too close on Iphone and Galaxy
Issue 2: we have 8 keyfacts in two rows on desktop which in the mobile DiVI preview are appearing two per row, but actually become 1 per row in actual devices, which make the scrolling too long. Is it possible to make it work still with two per row? Or maybe it will look weird on smaller screens?

thanks a lot in advance

 

it worked but this made boxes of different sizes and the copy not fully visible sometimes. I guess I would need to make the height of the row specific for the mobile resolution correct? I can use design settings in each row.

I am asking before trying as maybe I don't know any other css trick.

I found the same issue in many other similar boxes on the website. so it seems like a Divi issue in general and this happens on mobile or tablet.

thanks a lot again!

 

you were right. I didn't remember I set a height for that element.

Now it works perfectly thanks! but there's an error in the heigh of the third element of each row.
See screenshot

I checked settings but all seems fine both in sizing and spacing

 

thanks for getting back.

I am referring to the third element of each row which appears of different heights despite all is set correctly (at least I suppose it is).

Is this a but in DIVI?

thank you in advance

 

My apologies, but I don't understand.

If I have set the height of the columns to be equal in the row settings how is this possible?

thank you in advance

 

Thanks for getting back. I will try to explain better:

I have tried to make the rows appearing in two columns rather than one on mobile and the only code I have added is the one you suggested to me.

Now the height of the row is different for 2 out of 8 elements despite the fact that the height is defined to be equal.

Else I am not sure where I can look to see that "flex" setting.

Hope it's a bit more clear now.

thank you once again

 

Issue sorted now. Thank you very much!