Responsive Breakpoints Issue

[irfantakmil]

Describe the bug The responsive breakpoint didn't seem to work properly when I tried to run the React app on tablet or mobile devices. For example, the iPad that I'm using has a width viewport of 1080px in landscape mode. However, when I set the 'desktop' to a minimum of 1024px with 3 items, it only shows 2 items on my iPad. Another example is on mobile where the width viewport of the mobile is 800px in landscape mode. When I ran it on mobile in landscape mode, it only showed one item instead of two. If I inspect it on Chrome, however, the responsive breakpoint seems to be working properly.

To Reproduce Steps to reproduce the behavior: Set the responsive breakpoint the same as the one in the demo SSR: responsive={{ desktop: { breakpoint: { max: 3000, min: 1024 }, items: 3, partialVisibilityGutter: 40 }, mobile: { breakpoint: { max: 464, min: 0 }, items: 1, partialVisibilityGutter: 30 }, tablet: { breakpoint: { max: 1024, min: 464 }, items: 2, partialVisibilityGutter: 30 } }}

Expected behavior It is supposed to show 3 items on a tablet with a 1080px viewport and two items on a mobile with an 800px width viewport in landscape mode.

Screenshots

Additional context Add any other context about the problem here.

Reproduction Link to codesandbox.

[pehovorka]

Hi, I had the same issue and commented on it here: https://github.com/YIZHUANG/react-multi-carousel/issues/381#issuecomment-1810173765. It seems to be caused by the changes introduced in #382. Downgrading to 2.8.2 helped, but it is not ideal.

[irfantakmil]

Hi, I had the same issue and commented on it here: #381 (comment). It seems to be caused by the changes introduced in #382. Downgrading to 2.8.2 helped, but it is not ideal.

Hi, thanks for your reply. I haven't tried downgrading to 2.8.2, but I found a workaround for this issue using an event listener and react hooks from this website.

First, declare the initial state of the innerWidth and innerHeight const [windowSize, setWindowSize] = useState([window.innerWidth, window.innerHeight]);

Then, create a function within useEffect that sets the innerWidth and innerHeight. We can use this function as the listener. Use the 'resize' and 'orientationchange' listener to detect orientation changes for mobile and tablet devices. Don't forget to use the removeEventListener for the cleanup function.

`useEffect(()=> {

    const handleWindowSize = () => {
        setWindowSize([window.innerWidth, window.innerHeight]);
    }

    window.addEventListener('resize', handleWindowSize);
    window.addEventListener('orientationchange', handleWindowSize);

    return () => {
        window.removeEventListener('resize', handleWindowSize);
        window.removeEventListener('orientationchange', handleWindowSize);
    }
},[])`

Since the responsive property is not working as it's supposed to, I created a breakpoint functions for the number of items in the carousel.

const breakpointItems = (width) => { if(width >= 1024 && width <= 3000){ return 3; } else if(width >= 464 && width <= 1024){ return 2; } else { return 1; } }

const responsive = { desktop: { breakpoint: { max: 3000, min: 1024 }, items: breakpointItems(windowSize[0]) }, tablet: { breakpoint: { max: 1024, min: 464 }, items: breakpointItems(windowSize[0]) }, mobile: { breakpoint: { max: 464, min: 0 }, items: breakpointItems(windowSize[0]) } };

Tablet landscape

Tablet portrait

Mobile landscape

Mobile portrait

While this workaround works, I do think is also not ideal. Hopefully, the breakpoint issue will be fixed.

[syntax-e]

Hi, I'm also experiencing this same behavior on 2.8.4. I have confirmed that the issue is resolved by downgraded to 2.8.2. Any status on this issue?