CODEWITHSUNDEEP
htmlcssios
d3rpp
d3rpp

Reputation: 183

Border on top bar on mobile safari

I’m trying to get my website working properly and I’m having trouble with the top bar on iOS safari. The website in question is my personal site. And so far I’ve found the issue on the iPhone 11 Pro Max safari though I have reason to believe it is affecting all notched iPhones.

The problem in question

Is there any way to use css or meta tags in order to remove this line between the header and the top bar. I haven’t been able to find any info and so far the only work around I’ve found is to make it a web app. Though I doubt people would add my website to their Home Screen just to avoid the issue.

Upvotes: 2

Views: 1142

Answers (1)

Youssouf Oumar
Youssouf Oumar

Reputation: 46281

You cannot remove this line with CSS, it is for the browser to separate the top bar of the phone from your website. If your header has a different background color, you wouldn't even notice. Take a look at this (It is on an iPhone with notch):

enter image description here

Upvotes: 3

Related Questions