Cannot remove background colour of section for desktop only

Hey everyone!

I've got a question regarding my website. I used a simple SquareSpace template and then added quite a few of CSS modifications, especially media queries, to adjust the design for mobile.

As a final step I wanted to add a beige background for my bottom section (it's not a footer) on mobile. I have added the background using the SquareSpace page editor. Now I want to remove it for the desktop version (so that it is only visible on mobile) but I cannot seem to find a way to achieve this!

I have tried a lot of different lines of code in the custom CSS (@media queries, background:, background-colour:, .... calling on the section name, the section ID, #page...), but none of them seemed to work. The background always stays visible, both on desktop and on mobile.

If anyone would be so kind to point me in the right direction I would be very grateful!

Page:  https://hibiscus-halibut-y8fw.squarespace.com

Thanks,

K

You mean make this background color to white on desktop?

Yes exactly!! I have tried so many different ways and it just will not disappear.

On 3/10/2023 at 9:38 PM, abcdefghi said:

Yes exactly!! I have tried so many different ways and it just will not disappear.

If you still need code, add this to Design > Custom CSS

@media screen and (min-width:768px) {
[data-section-id="63f6b90327b32510c18c6691"] .section-background {
    background-color: white !important;
}
[data-section-id="63f6b90327b32510c18c6691"] .section-background img {
    visibility: hidden;
}
}