diff --git a/quartz/components/DesktopOnly.tsx b/quartz/components/DesktopOnly.tsx
index ee80137be..b163eb9d5 100644
--- a/quartz/components/DesktopOnly.tsx
+++ b/quartz/components/DesktopOnly.tsx
@@ -3,7 +3,11 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } fro
 export default ((component: QuartzComponent) => {
   const Component = component
   const DesktopOnly: QuartzComponent = (props: QuartzComponentProps) => {
-    return <Component displayClass="desktop-only" {...props} />
+    return (
+      <div class="desktop-only">
+        <Component {...props} />
+      </div>
+    )
   }
 
   DesktopOnly.displayName = component.displayName
diff --git a/quartz/components/MobileOnly.tsx b/quartz/components/MobileOnly.tsx
index 29958cf0c..2c108358e 100644
--- a/quartz/components/MobileOnly.tsx
+++ b/quartz/components/MobileOnly.tsx
@@ -3,7 +3,11 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } fro
 export default ((component: QuartzComponent) => {
   const Component = component
   const MobileOnly: QuartzComponent = (props: QuartzComponentProps) => {
-    return <Component displayClass="mobile-only" {...props} />
+    return (
+      <div class="mobile-only">
+        <Component {...props} />
+      </div>
+    )
   }
 
   MobileOnly.displayName = component.displayName