diff --git a/site/shared.templ b/site/shared.templ
index cde42c0b..4d114dfd 100644
--- a/site/shared.templ
+++ b/site/shared.templ
@@ -282,7 +282,7 @@ templ sidebarPageContents(sidebarGroups []*SidebarGroup, current *SidebarLink, c
 		<aside class="flex-col hidden gap-4 px-4 py-8 overflow-y-auto lg:flex min-w-80 bg-base-300 lg:visible">
 			@SidebarContents(sidebarGroups, current)
 		</aside>
-		<div class="flex flex-col w-full gap-16 p-4 lg:items-center lg:p-16">
+		<div class="flex flex-col w-full gap-16 p-4 lg:items-center">
 			@SidebarPrevNextLinks(sidebarGroups, current)
 			<article
 				class="flex flex-col flex-1 p-1 prose prose-primary lg:prose-lg prose-a:link-primary max-w-none lg:max-w-prose w-full"
@@ -390,7 +390,7 @@ templ sseIndicator(signalName string) {
 templ headerDropdownMenu(title string) {
 	<div class="dropdown dropdown-hover">
 		<div tabindex="0" role="button" class="font-bold uppercase link-hover">{ title }</div>
-		<ul tabindex="0" class="dropdown-content menu bg-base-300 rounded-box z-[1] w-52 p-2 shadow">
+		<ul tabindex="0" class="dropdown-content menu bg-base-300 rounded-box z-[1] w-52 p-2 shadow right-0">
 			{ children... }
 		</ul>
 	</div>
diff --git a/site/src/css/site.css b/site/src/css/site.css
index 7790a023..1b02c017 100644
--- a/site/src/css/site.css
+++ b/site/src/css/site.css
@@ -16,6 +16,10 @@ pre code {
     @apply text-base !important;
 }
 
+pre code span.cl {
+    padding-inline-end: 12px;
+}
+
 .output {
     @apply input input-bordered bg-transparent flex flex-grow items-center max-w-64 overflow-hidden;
 }
@@ -52,4 +56,4 @@ pre code {
 
 .prose ol, .prose ul {
     margin: 0 !important;
-}
\ No newline at end of file
+}
diff --git a/site/static/md/guide/getting_started.md b/site/static/md/guide/getting_started.md
index e367046f..b291c76e 100644
--- a/site/static/md/guide/getting_started.md
+++ b/site/static/md/guide/getting_started.md
@@ -74,15 +74,15 @@ To see this in action, we can use the [`data-text`](/reference/attribute_plugins
 </div>
 ```
 
-<div class="flex items-start justify-between p-8 alert">
+<div class="flex items-start justify-between p-8 alert max-md:flex-col">
     <div class="flex flex-col gap-4">
-        <div class="flex items-center">
-            <div class="w-20">Input:</div>
-            <input data-bind-input1 class="input input-bordered" />
+        <div class="flex items-center gap-x-6 max-sm:flex-col gap-[8px]">
+            <div class="w-20 max-sm:self-start max-sm:w-auto">Input:</div>
+            <input data-bind-input1 class="input input-bordered w-full" />
         </div>
-        <div class="flex items-center">
-            <div class="w-20">Output:</div>
-            <div data-text="$input1" class="output"></div>
+        <div class="flex items-center gap-x-6 max-sm:flex-col gap-[8px]">
+            <div class="w-20 max-sm:self-start max-sm:w-auto">Output:</div>
+            <div data-text="$input1" class="output w-full"></div>
         </div>
     </div>
 </div>
@@ -100,15 +100,15 @@ The value of the `data-text` attribute is a [Datastar expression](/guide/datasta
 </div>
 ```
 
-<div class="flex items-start justify-between p-8 alert">
+<div class="flex items-start justify-between p-8 alert max-md:flex-col">
     <div class="flex flex-col gap-4">
-        <div class="flex items-center">
-            <div class="w-20">Input:</div>
-            <input data-bind-input2 class="input input-bordered" />
+        <div class="flex items-center gap-x-6 max-sm:flex-col gap-[8px]">
+            <div class="w-20 max-sm:self-start max-sm:w-auto">Input:</div>
+            <input data-bind-input2 class="input input-bordered w-full" />
         </div>
-        <div class="flex items-center">
-            <div class="w-20">Output:</div>
-            <div data-text="$input2.toUpperCase()" class="output"></div>
+        <div class="flex items-center gap-x-6 max-sm:flex-col gap-[8px]">
+            <div class="w-20 max-sm:self-start max-sm:w-auto">Output:</div>
+            <div data-text="$input2.toUpperCase()" class="output w-full"></div>
         </div>
     </div>
 </div>
@@ -128,15 +128,15 @@ The [`data-computed`](/reference/attribute_plugins#data-computed) attribute crea
 
 This results in the `$repeated` signal's value always being equal to the value of the `$input` signal repeated twice. Computed signals are useful for memoizing expressions containing other signals.
 
-<div class="flex items-start justify-between p-8 alert">
+<div class="flex items-start justify-between p-8 alert max-md:flex-col">
     <div class="flex flex-col gap-4">
-        <div class="flex items-center">
-            <div class="w-20">Input:</div>
-            <input data-bind-input3 class="input input-bordered" />
+        <div class="flex items-center gap-6px max-sm:flex-col gap-[8px]">
+            <div class="w-20 max-sm:self-start max-sm:w-auto">Input:</div>
+            <input data-bind-input3 class="input input-bordered w-full" />
         </div>
-        <div class="flex items-center">
-            <div class="w-20">Output:</div>
-            <div data-computed-repeated="$input3.repeat(2)" data-text="$repeated" class="output"></div>
+        <div class="flex items-center gap-6px max-sm:flex-col gap-[8px]">
+            <div class="w-20 max-sm:self-start max-sm:w-auto">Output:</div>
+            <div data-computed-repeated="$input3.repeat(2)" data-text="$repeated" class="output w-full"></div>
         </div>
     </div>
 </div>
@@ -152,15 +152,15 @@ The [`data-show`](/reference/attribute_plugins#data-show) attribute can be used
 
 This results in the button being visible only when the input is _not_ an empty string (this could also be written as `!input`).
 
-<div class="flex items-start justify-between p-8 alert">
+<div class="flex items-start justify-between p-8 alert max-md:flex-col">
     <div class="flex flex-col gap-4">
-        <div class="flex items-center">
-            <div class="w-20">Input:</div>
-            <input data-bind-input4 class="input input-bordered" />
+        <div class="flex items-center gap-6px max-sm:flex-col gap-[8px]">
+            <div class="w-20 max-sm:self-start max-sm:w-auto">Input:</div>
+            <input data-bind-input4 class="input input-bordered w-full" />
         </div>
-        <div class="flex items-center">
-            <div class="w-20">Output:</div>
-            <div data-text="$input4" class="output"></div>
+        <div class="flex items-center gap-6px max-sm:flex-col gap-[8px]">
+            <div class="w-20 max-sm:self-start max-sm:w-auto">Output:</div>
+            <div data-text="$input4" class="output w-full"></div>
         </div>
     </div>
     <button data-show="$input4 != ''" class="btn btn-primary">
@@ -179,18 +179,18 @@ The [`data-class`](/reference/attribute_plugins#data-class) attribute allows us
 
 If the expression evaluates to `true`, the `hidden` class is added to the element; otherwise, it is removed.
 
-<div class="flex items-start justify-between p-8 alert">
+<div class="flex items-start justify-between p-8 alert max-md:flex-col">
     <div class="flex flex-col gap-4">
-        <div class="flex items-center">
-            <div class="w-20">Input:</div>
-            <input data-bind-input5 class="input input-bordered" />
+        <div class="flex items-center gap-x-6 max-sm:flex-col gap-[8px]">
+            <div class="w-20 max-sm:self-start max-sm:w-auto">Input:</div>
+            <input data-bind-input5 class="input input-bordered w-full" />
         </div>
-        <div class="flex items-center">
-            <div class="w-20">Output:</div>
-            <div data-text="$input5" class="output"></div>
+        <div class="flex items-center gap-x-6 max-sm:flex-col gap-[8px]">
+            <div class="w-20 max-sm:self-start max-sm:w-auto">Output:</div>
+            <div data-text="$input5" class="output w-full"></div>
         </div>
     </div>
-    <button data-class-hidden="$input5 == ''" class="btn btn-primary">
+    <button data-class-hidden="$input5 == ''" class="btn btn-primary max-sm:self-end">
         Save
     </button>
 </div>
@@ -212,18 +212,18 @@ The [`data-attr`](/reference/attribute_plugins#data-attr) attribute can be used
 
 This results in a `disabled` attribute being given the value `true` whenever the input is an empty string.
 
-<div class="flex items-start justify-between p-8 alert" data-signals-input6="''">
+<div class="flex items-start justify-between p-8 alert max-md:flex-col" data-signals-input6="''">
     <div class="flex flex-col gap-4">
-        <div class="flex items-center">
-            <div class="w-20">Input:</div>
-            <input data-bind-input6 class="input input-bordered" />
+        <div class="flex items-center gap-x-6 max-sm:flex-col gap-[8px]">
+            <div class="w-20 max-sm:self-start max-sm:w-auto">Input:</div>
+            <input data-bind-input6 class="input input-bordered w-full" />
         </div>
-        <div class="flex items-center">
-            <div class="w-20">Output:</div>
-            <div data-text="$input6" class="output"></div>
+        <div class="flex items-center gap-x-6 max-sm:flex-col gap-[8px]">
+            <div class="w-20 max-sm:self-start max-sm:w-auto">Output:</div>
+            <div data-text="$input6" class="output w-full"></div>
         </div>
     </div>
-    <button data-attr-disabled="$input6 == ''" class="btn btn-primary">
+    <button data-attr-disabled="$input6 == ''" class="btn btn-primary max-sm:self-end">
         Save
     </button>
 </div>
@@ -269,18 +269,18 @@ The [`data-on`](/reference/attribute_plugins#data-on) attribute can be used to a
 
 This results in the `$input` signal's value being set to an empty string whenever the button element is clicked. This can be used with any valid event name such as `data-on-keydown`, `data-on-mouseover`, etc.
 
-<div class="flex items-start justify-between p-8 alert" >
+<div class="flex items-start justify-between p-8 alert max-md:flex-col" >
     <div class="flex flex-col gap-4">
-        <div class="flex items-center">
-            <div class="w-20">Input:</div>
-            <input data-bind-input7 class="input input-bordered" />
+        <div class="flex items-center gap-6px max-sm:flex-col gap-[8px]">
+            <div class="max-sm:self-start max-sm:w-auto">Input:</div>
+            <input data-bind-input7 class="input input-bordered w-full" />
         </div>
-        <div class="flex items-center">
-            <div class="w-20">Output:</div>
-            <div data-text="$input7" class="output"></div>
+        <div class="flex items-center gap-6px max-sm:flex-col gap-[8px]">
+            <div class="max-sm:self-start max-sm:w-auto">Output:</div>
+            <div data-text="$input7" class="output w-full"></div>
         </div>
     </div>
-    <button data-on-click="$input7 = ''" class="btn btn-secondary">
+    <button data-on-click="$input7 = ''" class="btn btn-secondary max-md:self-end">
         Reset
     </button>
 </div>