Problem with backgrounds on mobile

[wrrhmm]

Hello!

New user here. Been fiddling around for a whole morning trying to fix this.

I find that I cannot extend the background colour of each individual Project page beyond the top of the site into the section where the time/battery/wifi etc. section is on an iPhone (no other mobile device to test). Site: https://fecund.world/

Instead the colour is the Background colour set in the Customize section (currently set to white ffffff, and thus 'boxing' the website in on mobile with a white bar at the top and bottom). I tried to upload an invisible .png file to get around this but you can't just seem to 'clear' the Background colour section. However, I also don't think that would work (as it would be layering invisible onto nothing). I feel I need to set something to get the Project page background colours up and beyond the top of the page.

I have looked through every aspect of the Lay Theme backend and can't find anything that seems to work.

Uploaded some screenshots. Ignore the crudely drawn arrows.

Best, Thomas.

[wrrhmm]

I have made some progress - it seems the white bar will no longer be there and will be the colour of the page, if the page colour is a dark enough colour.

Is there anyway of changing this feature so that I keep my existing pages nice, bright colours rather than redoing them all in murkier colours?

[arminunruh]

hey i think those bars at the top and bottom are just the browser bars!
its just your safari browser bar color

maybe this?
https://medium.com/@adboio/how-to-change-your-websites-address-bar-color-in-safari-15-4c032c86daab

i think it has nothing to do with any lay theme settings

for me these bars are always white on any website no?

[wrrhmm]

Thank you for your response Armin!

I think the link relates to the desktop version of Safari? I am happy with the desktop appearance, it's just the mobile appearance that I'm trying to solve.

I don't believe this to be a iOS Safari issue as I can change the top area if I change the background colour. I have uploaded some screenshots where I have changed the background colour to ffff00 (the same as my homepage) and as you can see, it blends in seamlessly. However, this yellow colour is now added to every Project page too. It has also overridden the 'dark colour' behaviour I mentioned in my second post.

[arminunruh]

I have uploaded some screenshots where I have changed the background colour to ffff00 (the same as my homepage) and as you can see, it blends in seamlessly.

How did you even do that?
Did you use the css here?
https://medium.com/@adboio/how-to-change-your-websites-address-bar-color-in-safari-15-4c032c86daab

ah u set the bg color in customize -> background, right?

Basically i really don't know how that color works

You could also try setting the background color of body{} using css
maybe thats what does this not sure

so here's my guess:
the safari browser calculates that top bar color based on the css background color of body{}

lay theme's body{} color is always the color set in customize -> background

so its always white

the background color of the grid is just the grid container's background color, not the body's:
this one:

so i guess you could set different bg colors for your html, body by using custom css on a per page basis:

https://laytheme.com/documentation/custom-css-styling.html#css-based-on-current-page

Like

body.slug-about{
background-color: cyan;
}

[wrrhmm]

@arminunruh said in Problem with backgrounds on mobile:

body.slug-about{
background-color: cyan;
}

Thank you for all of this Armin. Despite having no real idea about CSS/HTML, I managed to paste your code in, Lay Theme prompted me to remove 'body', copy the exact colour codes, repeat for each page, then copy into each of the three CSS sections and voila! Had to quickly delete each mobile layout though and copy/stack the layout on top as it worked for some and not others until I did this.

Brilliant. Very very pleased. Thank you so much. :) Have a great day!

[arminunruh]

alright im glad it worked for you!