ScrollTrigger.matchMedia not working with 2 Media Queries

[the_gmo]

I'm trying to setup a sidescroll, which works fine for one screen-size. However, on smaller screens the number of elements that are shown next to each other is changing, and so should the setup. Once the screen gets too small, I want to no longer offer this sidescroll feature and rather have the user navigate using arrows.

 

I just can't get multiple media-queries if they don't cover the entire pixel range.

For example:

With this setup I get the two different ScrollTrigger settings I need. However it goes down to the small screen:
"(min-width: 1351px)": ... 
"(max-width: 1350px)": ...

With this setup, both ScrollTrigger settings no longer work as expected. However below 631px there's no more Scrolltrigger magic (which is what I want):
"(min-width: 1351px)": ... 
"(min-width: 631px)": ... 

What am I missing here? What sort of definition does ScrollTrigger expect for the range I don't want it to do anything?

Also, would it make a difference if I use rem in the media-queries instead of px?
 

ScrollTrigger.matchMedia({

    //"(min-width: 84.4375rem)": function() {
    "(min-width: 1351px)": function() {
        gsap.to(sections, {
            xPercent: -100 * (sections.length - 3),
            ease: "none",
            scrollTrigger: {
                trigger: "#product-container",
                pin: true,
                scrub: 2,
                snap: 1 / (sections.length - 3),
                end: () => "+=" + document.querySelector("#product-container").offsetWidth
            }
        });
    },
    
    //"(min-width: 39.4375rem)": function() {
    "(min-width: 631px)": function() {
        gsap.to(sections, {
            xPercent: -100 * (sections.length - 4),
            ease: "none",
            scrollTrigger: {
                trigger: "#product-container",
                pin: true,
                scrub: 1,
                snap: 1 / (sections.length - 4),
                end: () => "+=" + document.querySelector("#product-container").offsetWidth
            }
        });
    },
})

 

[ZachSaucier]

Hey the_gmo and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club GreenSock membership!

 

From what I can tell, it's just a logical issue of your media query sections overlapping. You should use a min and max width for each of your sections that need it. For example:

"(min-width: 1351px) and (max-width: 630px)": function() {

 

14 minutes ago, the_gmo said:

would it make a difference if I use rem in the media-queries instead of px?

It shouldn't matter, no.

[the_gmo]

Thanks Zach! That work like a charm!

Thought to much in the CSS realm where rules overide each other (rendering them at least partly false) - but sure, here it was left with two "true" queries.
Thanks for the quick help.