Jump to content

Header background color works on desktop but not mobile

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:

    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; }  

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
  • Views 542
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • 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.