Forum | Appery.io

Hi,

I've followed the instructions outlined here for creating safe space for the notch and microphone area on the iPhone X:

https://blog.phonegap.com/displaying-...

However, the top of the my JQM app won't budge, despite adding the required CSS.

Also, while the footer does rise above the microphone area, I can now see the page content below the footer when testing on the iPhone X simulator.

Anyone have any helpful advice?

Thanks,

Chris

Hello Chris,

Please see also this link: https://stackoverflow.com/questions/4...

Hi Serhii,

Thanks for the reply. Ended up going with this solution:

prebody {
top: constant(safe-area-inset-top);
top: env(safe-area-inset-top);
position: relative;
}

.ui-header {
margin-top: constant(safe-area-inset-top);
margin-top: env(safe-area-inset-top);
}

.ui-footer {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}/pre

Hi Appery,

I have been trying to work out how to correct the notch and footer gaps as they are NOT adjusting to the notch and footer as specified above.

I tried to follow your suggested article to Serhii, but I couldn't seem to get the app to adjust. I cannot even get the white space to appear!

Please, would you assist in providing a suggestion on how I should approach this change?

Regards

Maurice

Hello, have you tried Chris's solution?

Hi Serhii,
Thanks for replying. I tried to copy-paste the code directly into xCode in CSS for a page and nothing moved. Perhaps I am to adjust the code elsewhere. Would you tell me where you think I should put it?
Many thanks
Maurice

Please add it to the custom CSS file (Create new-CSS)