diff --git a/site/layouts/shortcodes/twsnippet/demo.html b/site/layouts/shortcodes/twsnippet/demo.html
index dbe43cf44..b775360a1 100644
--- a/site/layouts/shortcodes/twsnippet/demo.html
+++ b/site/layouts/shortcodes/twsnippet/demo.html
@@ -5,7 +5,7 @@
       {{ .Inner }}
     </div>
     <!-- Header -->
-    <div class="mt-4 border-t p-4 text-center dark:border-neutral-600">
+    <div class="hidden md:block mt-4 border-t p-4 text-center dark:border-neutral-600">
       <button
         class="inline-block rounded px-4 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-primary hover:bg-secondary-100 focus:bg-secondary-100 focus:outline-none focus:ring-0 active:text-primary-700 dark:text-primary-400 dark:hover:bg-white/10 dark:focus:bg-white/10"
         data-te-collapse-init
diff --git a/site/layouts/shortcodes/twsnippet/no-demo.html b/site/layouts/shortcodes/twsnippet/no-demo.html
index 6d2d36efd..ce71a9725 100644
--- a/site/layouts/shortcodes/twsnippet/no-demo.html
+++ b/site/layouts/shortcodes/twsnippet/no-demo.html
@@ -1,4 +1,4 @@
-<section class="my-5">
+<section class="my-5 hidden md:block">
   <div
     class="rounded-5 border-t border-l border-r bg-white dark:border-neutral-600 dark:bg-neutral-800">
     <!-- Header -->
diff --git a/site/layouts/shortcodes/twsnippet/wrapper.html b/site/layouts/shortcodes/twsnippet/wrapper.html
index 348f520c4..4d60d4d7e 100644
--- a/site/layouts/shortcodes/twsnippet/wrapper.html
+++ b/site/layouts/shortcodes/twsnippet/wrapper.html
@@ -4,9 +4,9 @@
 (default slice (.Scratch.Get "hashes")) }} {{ if eq
 .Page.Params.docs_content_pro true }}
 
-<div class="mdb-pro-example">
+<div class="mdb-pro-example hidden md:block">
   {{end}}
-  <div class="docs-pills">
+  <div class="docs-pills hidden md:block">
     <div
       class="
         flex