I have a background image but on my phone (iPhone xs) there is a white bar are the bottom?? It’s really annoying I have the settings to cover so I don’t know why its doing that?
Here is a link in case you want to take a look on your phone: https://www.dwgoalkeepingacademy.co.uk/old-home
what about applying a background image to a section containing your column component instead of the body. Not sure what is wrong with your xs iPhone, everything display well on my end but I would as a golden rule try to leave the body as much as possible and apply changes to containers instead. Try to give your section 100% width and 100 vh (viewport height) and apply the background cover.
I thought it might’ve been because I had that spare column at the top, Im not sure how to get rid of that without getting rid of it on the homepage so I’ll leave it there, not sure if thats bad practise?
I understand why you use column but I wouldn’t recomment using it for this type of layout. Have a look at flexbox, way easier to style and more versatile that the old column
I’m really sorry I seem to be having the same problem again? It worked for a while then I tried to add a footer and it broke it. I just wanted some space on mobile after the phone image. I really don’t know what I’ve done thats different and managed to break it?
Even weirder that now its showing that it will have white space on mobile now too?
If you have a screenshot for us to have a look at, it could help everything looks good from my side, can’t see any white space from the link you provided.
Ive managed to get this working on my homepage but the other pages won’t work in the same way. I’m getting so frustrated, anyone with any suggestions please put them forward!
any screenshot of the issue for us to have a look at ?
From what I see on your read-only link, you’ve placed the background image on the body again.
Also, be careful with the size of the image you upoad. Your background image is, I believe, way too big (3,5 Mo).
All right, you might want to try set a background image on something else than the body (your read-only link shows the background was set on the body again). Like suggested earlier, try to add a section or a simple div with 100% width and 100vh height which would act as a container for your entire content. Set then the background image on that section or div.
Do you still see it on your end? And btw, you only need to have your height set to 100vh once, unless you are planning to have other sections at different heights.
But when I test it in Safari and Chrome on XS I do not have any white bar.
When I use your site live link in my testing program, I do not see what you are describing.
Could you please provide a screenshot or video of what you are seeing?
Also, try clearing your cookies as well. But keep in mind that 100vh is 100% of the Viewport Height. So if you have your section at 100VH everything that is within that section will be visible to the size of the viewport.