iPhone Notch White Space

Hi Everyone,

Just a quick question on how to show fill the white space above the header? (screenshot, area of the clock & batter / camera notch)

I am opening the app on iOS, where the white space is shown at the camera notch.

Is it possible to match that notch area with color #0e1117 (the dark mode)

Thank you very much in advance.

Tried to add, but

css = """
                #MainMenu {visibility: hidden;}
                footer {visibility: hidden;}
                header {visibility: hidden;}
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
st.markdown(css , unsafe_allow_html=True)

But it is still showing white blank space on the iPhone notch


The trick is to customize the relevant CSS element which may require some iteration of trial and error in identifying the CSS element name, which can be done via the use of Google Chrome’s View > Developer > Inspect Elements

I made a video on how to do this:

Hope this helps!

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.