Header background color works on desktop but not mobile

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. 

7 hours ago, tuanphan said:

Mobile needs this CSS

.Mobile-bar.Mobile-bar--top {
    background: #f7e5ee;
}

 

This worked, thank you so much!!