Jump to content

Cannot remove background colour of section for desktop only

Recommended Posts

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

Edited by abcdefghi
Link to comment
  • Replies 3
  • Views 270
  • Created
  • Last Reply

Top Posters In This Topic

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.