Content Area Modal Render Issues on iPhone

[MaxKirsten]

Hi,

I have a render issue with a Content Area Modal in a Global Block. It works fine on all desktop layouts, but not for mobile devices in portrait or landscape aspect, despite the Pro preview seeming ok. On the actual device it behaves differently.

There are 2 issues:

• The modal is not centered on the portrait aspect screen - it is off to the right.
• The CF7 date picker field is both collapsed and centered - it should be full width like all the other fields

Are you able to help with this problem, please? The screenshot shows the problem. All details in the Secure Note.

Thanks,
Christopher

[tristup]

Hi Max,

Thanks for reaching out.
It seems the padding of the Modal inner content is the reason behind the issue with the modal alignment. Please set the value 1.5 to get the modal in the center.

Regarding the CF7 date picker element issue, you may find the solution in this thread:Contact Form 7 date field not showing in Safari!

Thanks

[MaxKirsten]

Hi Tristup,

Thanks for the help. The first bit worked and the modal is now centered on iPhone - perfect!

The CF7 issue is not the same. If you compare my screenshot with yours, you can see that the date field is reduced to a little block. The date picker still works. However, in your screenshot you have a full width field which shows “Preferred Date: dd/mm/yyyy” and the date picker. In the new image my screenshot is on the left, yours on the right.

Thanks,
Christopher

[ruenel]

Hello Christopher,

Be advised that each respective browser renders the date picker differently. It looks way different when you view your page in Chrome and in Safari.

Chrome:

Safari:

Hope this helps.