White space above header mobile

Hi

I couldn’t replicate the issue.

If it’s resolved, best to close the thread.

If not, perhaps a screenshot with device and browser used may help.

View post on imgur.com

Look at both those photos, you can see the white bar at the top and the white bar when i scroll to the bottom of the site. Same happens when you try to scroll up on the top aswell.

This is only on mobile (Iphone, safari)

• This reply was modified 3 months ago by joern2.

Hi

I was checking in android.

“Is there any custom CSS to make it black?“

CSS that should work as shown below (change the color to #000000 if black required as the one suggested is the one from the current body background however the footer is #111010)

html {background-color: #0b0b12;}

• This reply was modified 3 months ago by Farook Kholwadia.
• This reply was modified 3 months ago by Farook Kholwadia.

Tried to add it in both customize -> additional CSS and styles -> css and neither worked unfortunately

• This reply was modified 3 months ago by joern2.

Hi

I’ll try and replicate in an actual device. I have an android but the wife and kids all have iPhones.

What’s the iPhone model?

Hi

Just checked on an iPhone and can now see what it’s doing. I also noticed if I swipe left to right OR right to left, it does the same in creating space. As I don’t see any of the behaviour on my android AND the CSS I offered doesn’t help, I’m assuming this is an iPhone specific quirk and the white space is outside the view.

I can’t test it as such but this may be of use: https://medium.com/@ranju0305/solving-common-responsive-design-issues-eliminating-empty-white-space-on-mobile-screens-263f05e8d2c5 having said that, if the white space is outside of the actual content and the iPhone quirk is the culprit creating this, it may fail to provide you with the solution.

As an aside, not relevant but I do like the aesthetics of your site, ‘kudos! to whoever created it’

That actually fixed the top and bottom when “over” scrolling, but the white bar at the top and when updating the site by scrolling up was more tricky to get rid off.

It also made the website more “bugged”, as you can see in these 2 videos.

In the first one (without code) you can see updating the website and scrolling down works fine(without code). In the second one (with code) it bugs out by preventing me to scroll down almost like it freezes and it fixes by letting go of the screen. After that you can see it refuses to update site when trying to scroll up like it usually does.

I will leave the code up for a while so you can try if you get the same problems

View post on imgur.com

html,body{

width: 100%;

height: 100%;

margin:0;

padding:0;

overflow-x:hidden;

}

Thanks for the feedback on the aesthetics, but its mostly built after a template

Hi

We checked, I say we as it’s the wife’s phone ?? and I see what you mean.

The only thing I can suggest after checking the behaviour of other sites, which as far as we could see, behave the same with the white bar at the top and the bottom exactly as you first posted, is to either revert to where you were before and accept this as a iPhone quirk or check if someone has resolved this by search or compare with any well established sites, I always check government sites or the BBC site as they are very up on these things and have a bigger budget to have teams of developers. If you come across a site that does behave closer to your ambition, just check the code.

I know https://www.e24.no is a black site and has no problems with the white bar on top. But how they did that and how to check the code is above my skill level.

Hi

I don’t see a ‘black’ site only white, both on android and iPhone. Wondering if it’s the app that shows in black (didn’t download it)? The images in both the app stores don’t show black but they could have updated since

I see, in iphone dark mode its all black and in normal its all white.

Seems like my site doesnt regognize dark mode somehow