diff --git a/packages/docsearch-css/src/button.css b/packages/docsearch-css/src/button.css
index 4cb498643..d8577aed7 100644
--- a/packages/docsearch-css/src/button.css
+++ b/packages/docsearch-css/src/button.css
@@ -63,7 +63,7 @@
   width: 20px;
 }
 
-@media (max-width: 750px) {
+@media (max-width: 768px) {
   .DocSearch-Button-Keys,
   .DocSearch-Button-Placeholder {
     display: none;
diff --git a/packages/docsearch-css/src/modal.css b/packages/docsearch-css/src/modal.css
index 82125685b..20b545504 100644
--- a/packages/docsearch-css/src/modal.css
+++ b/packages/docsearch-css/src/modal.css
@@ -556,7 +556,7 @@ svg.DocSearch-Hit-Select-Icon {
 }
 
 /* Responsive */
-@media (max-width: 750px) {
+@media (max-width: 768px) {
   :root {
     --docsearch-spacing: 10px;
     --docsearch-footer-height: 40px;
diff --git a/packages/docsearch-react/src/DocSearchModal.tsx b/packages/docsearch-react/src/DocSearchModal.tsx
index 2d82ab443..b76edd631 100644
--- a/packages/docsearch-react/src/DocSearchModal.tsx
+++ b/packages/docsearch-react/src/DocSearchModal.tsx
@@ -332,7 +332,7 @@ export function DocSearchModal({
   }, []);
 
   React.useEffect(() => {
-    const isMobileMediaQuery = window.matchMedia('(max-width: 750px)');
+    const isMobileMediaQuery = window.matchMedia('(max-width: 768px)');
 
     if (isMobileMediaQuery.matches) {
       snippetLength.current = 5;