How to add screensize parameters around a data-section-id

Site URL: https://star-fennel-h9p3.squarespace.com/

Hey!

I have a section that is multicolored. It's perfect on mobile and desktop. But I want to change it to a single color on tablet only.

Here is my current css:

[data-section-id="60b93ddcc8f89f0d0d45b26e"] .section-background {background: linear-gradient(270deg, #DFCCBE 500px, #F8F5F2 80px);}

My question is, how do I add tablet parameters?

ie: @media screen and (max-width:1024px) and (min-width:768px)

I tried this, but of course - got an error

@media screen and (max-width:1024px) and (min-width:768px)
[data-section-id="60b93ddcc8f89f0d0d45b26e"]
.section-background {background-color: #DFCCBE;}

Site: https://star-fennel-h9p3.squarespace.com/

Password: website2021

Hello,

You're incredibly close with the code you shared to having a working solution. The reason it isn't working is because there are no opening and closing "{}" following the code for your @media screen query, so the fix is simple.

@media screen and (max-width:1024px) and (min-width:768px) {
[data-section-id="60b93ddcc8f89f0d0d45b26e"]
.section-background {background-color: #DFCCBE;}} 

Hope this helps!

-Dan

Thanks @Wolfsilon!  But for some reason it still didn't work to change the background to a single color!

Any ideas?

I tried adding !important;  but still nothing!

-L

11 hours ago, LaurelB said:

Thanks @Wolfsilon!  But for some reason it still didn't work to change the background to a single color!

Any ideas?

I tried adding !important;  but still nothing!

-L

Hi. Where is this section on homepage?

Replace the property background-color with background.

Let us know how it goes.

PERFECT! that worked @creedon thanks both of you!

@creedon  @Wolfsilon