Jump to content

Header background color works on desktop but not mobile

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.katiefrigginburk.com/about

On my site (Farro template) I have a blue background color, except for the About page, where I want it to be a pink tone (https://www.katiefrigginburk.com/about).

I have this CSS in "code injection" which makes the background of the page elements appear pink:

<style>
    body#collection-5f3b2c45ab40561612eeb9bb { border-color: #F7E5EE; }  
  #collection-5f3b2c45ab40561612eeb9bb header.Header.loaded {
    background: #F7E5EE; }
  #collection-5f3b2c45ab40561612eeb9bb main#main {
    background: #F7E5EE; }
  #collection-5f3b2c45ab40561612eeb9bb footer.Footer {
    background: #F7E5EE; }  
</style>

This works correctly on desktop. However, on mobile, most of the background is pink but the bit around my main page header (with my site logo and navigation menu) is still blue. Does anyone know why or how to fix this? I tried a few things but nothing seems to work. 

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.