diff --git a/playwright-tests/features/responsive/responsive.spec.tsx b/playwright-tests/features/responsive/responsive.spec.tsx
index 7e6c05580..9502f2d78 100644
--- a/playwright-tests/features/responsive/responsive.spec.tsx
+++ b/playwright-tests/features/responsive/responsive.spec.tsx
@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/experimental-ct-react";
 import Responsive from "./responsive.story";
 
-test.use({ viewport: { width: 1200, height: 500 } });
+test.use({ viewport: { width: 1000, height: 500 } });
 
 async function activeSlidesCount(component) {
   return await component.locator(".slick-slide.slick-active").count();
@@ -10,11 +10,11 @@ async function activeSlidesCount(component) {
 test("Responsive settings", async ({ mount, page }) => {
   const component = await mount(<Responsive />);
 
-  await expect(await activeSlidesCount(component)).toEqual(4);
+  await expect(await activeSlidesCount(component)).toEqual(3);
 
-  await page.setViewportSize({ width: 1000, height: 500 });
+  await page.setViewportSize({ width: 1200, height: 500 });
   await page.waitForTimeout(100);
-  await expect(await activeSlidesCount(component)).toEqual(3);
+  await expect(await activeSlidesCount(component)).toEqual(4);
 
   await page.setViewportSize({ width: 600, height: 500 });
   await page.waitForTimeout(100);
@@ -35,4 +35,4 @@ test("Responsive settings", async ({ mount, page }) => {
   await page.setViewportSize({ width: 1500, height: 500 });
   await page.waitForTimeout(100);
   await expect(await activeSlidesCount(component)).toEqual(4);
-});
+});
\ No newline at end of file
diff --git a/src/slider.js b/src/slider.js
index 7fdbe4a13..52fa0c1a7 100644
--- a/src/slider.js
+++ b/src/slider.js
@@ -26,6 +26,12 @@ export default class Slider extends React.Component {
       }
     };
     mql.addListener(listener);
+
+    // Manually check if the query currently matches on initial load
+    if (mql.matches) {
+      handler();
+    }
+
     this._responsiveMediaHandlers.push({ mql, query, listener });
   }