Site URL: http://www.georjart.com/paintings-new
Hello,
The password for the page is: M6NYey7f
I've added a background image to the header of a specific page on the website above using the following code:
#collection-6058d724f45e96664a810213 header#header {
background-image: url(https://www.emergentcreative.co.uk/wp-content/uploads/2021/04/Gart-BG-Header-Example-1-2.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
margin-bottom: 9px;
padding: 40px
}
However when I go to mobile view it looks like this:
I can see that the issue is with the "position" and "background-image" code and by going into Dev Tools in Chrome I can edit the following media query:
@media only screen and (max-width: 750px)
#header {
background-image: none !important;
position: inherit !important;
}
I can get it too look normal:
However I'm not certain how to add this code into the CSS editor in Squarespace, let alone on a specific page which is what I'd like to do since the changes aren't live yet.
Does anyone have a solution?
Cheers,
M.