diff --git a/docs/content/3.forms/4.select-menu.md b/docs/content/3.forms/4.select-menu.md
index aa926bdf..8ba317c0 100644
--- a/docs/content/3.forms/4.select-menu.md
+++ b/docs/content/3.forms/4.select-menu.md
@@ -17,7 +17,7 @@ Like the Select component, you can use the `options` prop to pass an array of st
 
 ::component-example
 #default
-:select-menu-example-basic{class="max-w-[12rem] w-full"}
+:select-menu-example-basic{class="w-full lg:w-48"}
 
 #code
 ```vue
@@ -39,7 +39,7 @@ You can use the `multiple` prop to select multiple values.
 
 ::component-example
 #default
-:select-menu-example-multiple{class="max-w-[12rem] w-full"}
+:select-menu-example-multiple{class="w-full lg:w-48"}
 
 #code
 ```vue
@@ -61,7 +61,7 @@ You can pass an array of objects to `options` and either compare on the whole ob
 
 ::component-example
 #default
-:select-menu-example-objects{class="max-w-[12rem] w-full"}
+:select-menu-example-objects{class="w-full lg:w-48"}
 #code
 ```vue
 <script setup>
@@ -115,7 +115,7 @@ Use the `selected-icon` prop to set a different icon or change it globally in `u
 ::component-card
 ---
 baseProps:
-  class: 'max-w-[12rem] w-full'
+  class: 'w-full lg:w-48'
   placeholder: 'Select a person'
   options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 props:
@@ -140,7 +140,7 @@ This will use Headless UI [Combobox](https://headlessui.com/vue/combobox) compon
 ::component-card
 ---
 baseProps:
-  class: 'max-w-[12rem] w-full'
+  class: 'w-full lg:w-48'
   placeholder: 'Select a person'
   options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 props:
@@ -157,7 +157,7 @@ Use the `debounce` prop to adjust the delay of the function.
 
 ::component-example
 #default
-:select-menu-example-async-search{class="max-w-[12rem] w-full"}
+:select-menu-example-async-search{class="w-full lg:w-48"}
 
 #code
 ```vue
@@ -191,7 +191,7 @@ You can override the `#label` slot and handle the display yourself.
 
 ::component-example
 #default
-:select-menu-example-multiple-slot{class="max-w-[12rem] w-full"}
+:select-menu-example-multiple-slot{class="w-full lg:w-48"}
 
 #code
 ```vue
@@ -218,7 +218,7 @@ You can also override the `#default` slot entirely.
 
 ::component-example
 #default
-:select-menu-example-button{class="max-w-[12rem] w-full"}
+:select-menu-example-button{class="w-full lg:w-48"}
 
 #code
 ```vue