diff --git a/docs/.vitepress/vitepress/components/vp-sponsor-large.vue b/docs/.vitepress/vitepress/components/vp-sponsor-large.vue
index f1cce6b8b4..0ac4163a06 100644
--- a/docs/.vitepress/vitepress/components/vp-sponsor-large.vue
+++ b/docs/.vitepress/vitepress/components/vp-sponsor-large.vue
@@ -36,6 +36,11 @@ defineProps({
     height: 72px;
   }
 
+  @media (max-width: 767px) {
+    width: 236px;
+    height: 72px;
+  }
+
   img {
     border-radius: 8px;
     overflow: hidden;
diff --git a/docs/.vitepress/vitepress/components/vp-sponsor-small.vue b/docs/.vitepress/vitepress/components/vp-sponsor-small.vue
index 1c11efad99..de5230652d 100644
--- a/docs/.vitepress/vitepress/components/vp-sponsor-small.vue
+++ b/docs/.vitepress/vitepress/components/vp-sponsor-small.vue
@@ -36,6 +36,11 @@ import { goldSponsors } from '../../config/sponsors'
       width: 44px;
     }
 
+    @media (max-width: 767px) {
+      width: 44px;
+      height: 44px;
+    }
+
     img {
       height: 100%;
       width: 100%;
diff --git a/docs/.vitepress/vitepress/styles/sidebar.scss b/docs/.vitepress/vitepress/styles/sidebar.scss
index 01403d90f0..dba924bf8d 100644
--- a/docs/.vitepress/vitepress/styles/sidebar.scss
+++ b/docs/.vitepress/vitepress/styles/sidebar.scss
@@ -35,33 +35,33 @@
     }
   }
 
-  @include respond-to('md') {
-    width: var(--sidebar-width-sm);
+  @media (max-width: 767px) {
+    width: calc(var(--vp-sidebar-width-mobile) - 14px);
   }
 
   @include respond-to('md') {
-    width: var(--vp-sidebar-width-small);
+    width: calc(var(--vp-sidebar-width-small) - $scrollbar-size);
   }
 
   @include respond-to('lg') {
     top: var(--header-height);
     transform: translate(0);
-    width: var(--vp-sidebar-width-small);
   }
 
   @include respond-to('xxl') {
     // 6px stands for 3px sidebar scrollbar width + 3 content scrollbar width
-    padding: 48px 48px 96px
-      calc((100% - var(--vp-screen-max-width) - $scrollbar-size) / 2);
+    padding: 48px 48px 96px calc((100% - var(--vp-screen-max-width)) / 2);
 
     width: calc(
-      (100% - var(--vp-screen-max-width) - $scrollbar-size) / 2 +
-        var(--vp-sidebar-width-small)
+      (100% - var(--vp-screen-max-width) - 32px) / 2 +
+        var(--vp-sidebar-width-small) - $scrollbar-size
     );
   }
 
   @include respond-to('max') {
-    padding: 48px 48px 96px
-      calc((100% - var(--vp-screen-max-width) - $scrollbar-size) / 2 - 18px);
+    width: calc(
+      (100% - var(--vp-screen-max-width) + 48px) / 2 +
+        var(--vp-sidebar-width-small) - $scrollbar-size
+    );
   }
 }