diff --git a/app/src/App/OnDeviceDisplayApp.tsx b/app/src/App/OnDeviceDisplayApp.tsx
index 77aceabce20..379e92838ab 100644
--- a/app/src/App/OnDeviceDisplayApp.tsx
+++ b/app/src/App/OnDeviceDisplayApp.tsx
@@ -57,7 +57,7 @@ import {
 
 import { OnDeviceDisplayAppFallback } from './OnDeviceDisplayAppFallback'
 
-import { hackWindowNavigatorOnLine } from './hacks'
+import { hackWindowNavigatorOnLine, hackAddTouchClass } from './hacks'
 
 import type { Dispatch } from '../redux/types'
 
@@ -176,6 +176,11 @@ export const OnDeviceDisplayApp = (): JSX.Element => {
     }
   }, [dispatch, isIdle, userSetBrightness])
 
+  React.useEffect(() => {
+    // add a touch class to the window object to tell CSS that we're in ODD mode
+    hackAddTouchClass()
+  }, [])
+
   // TODO (sb:6/12/23) Create a notification manager to set up preference and order of takeover modals
   return (
     <ApiHostProvider hostname="127.0.0.1">
diff --git a/app/src/App/hacks.ts b/app/src/App/hacks.ts
index 696e7baec9a..a50f19d1e85 100644
--- a/app/src/App/hacks.ts
+++ b/app/src/App/hacks.ts
@@ -8,9 +8,18 @@
 // This function is exposed in its own module so it can be mocked in testing
 // since jest really doesn't like you doing this.
 
+import { RESPONSIVENESS } from '@opentrons/components'
+
 export const hackWindowNavigatorOnLine = (): void => {
   Object.defineProperty(window.navigator, 'onLine', {
     get: () => true,
   })
   window.dispatchEvent(new Event('online'))
 }
+
+// explicitly add a touch class to the body so UI elements know to render in ODD mode
+export const hackAddTouchClass = (): void => {
+  if (!document.body.classList.contains(RESPONSIVENESS.TOUCH_ODD_CLASS)) {
+    document.body.classList.add(RESPONSIVENESS.TOUCH_ODD_CLASS)
+  }
+}
diff --git a/app/src/atoms/Banner/index.tsx b/app/src/atoms/Banner/index.tsx
index 1061dd50ac9..ddf130332b0 100644
--- a/app/src/atoms/Banner/index.tsx
+++ b/app/src/atoms/Banner/index.tsx
@@ -99,7 +99,7 @@ export function Banner(props: BannerProps): JSX.Element {
     font-weight: ${TYPOGRAPHY.fontWeightRegular};
     border-radius: ${SPACING.spacing4};
 
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       font-size: 1.25rem;
       font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
       background-color: ${COLORS.yellow35};
diff --git a/app/src/atoms/InlineNotification/index.tsx b/app/src/atoms/InlineNotification/index.tsx
index 1605abd990d..51f61a8ab50 100644
--- a/app/src/atoms/InlineNotification/index.tsx
+++ b/app/src/atoms/InlineNotification/index.tsx
@@ -95,7 +95,7 @@ export function InlineNotification(
         gap: ${SPACING.spacing8};
         border-radius: ${BORDERS.borderRadius4};
         padding: ${SPACING.spacing8} ${SPACING.spacing12};
-        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
           gap: ${SPACING.spacing12};
           border-radius: ${BORDERS.borderRadius8};
           padding: ${SPACING.spacing12} ${SPACING.spacing16};
@@ -108,7 +108,7 @@ export function InlineNotification(
         flexDirection={DIRECTION_ROW}
         css={css`
           gap: ${SPACING.spacing8};
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
             gap: ${SPACING.spacing12};
           }
         `}
@@ -117,7 +117,7 @@ export function InlineNotification(
           css={css`
             width: ${SPACING.spacing16};
             height: ${SPACING.spacing16};
-            @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+            body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
               width: 1.75rem;
               height: 1.75rem;
             }
@@ -141,7 +141,7 @@ export function InlineNotification(
               inline text layout on ODD. Soooo here you go */}
             <br
               css={`
-                @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+                body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
                   display: none;
                 }
               `}
@@ -173,7 +173,7 @@ export function InlineNotification(
             css={css`
               width: 28px;
               height: 28px;
-              @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+              body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
                 width: ${SPACING.spacing48};
                 height: ${SPACING.spacing48};
               }
@@ -187,7 +187,7 @@ export function InlineNotification(
               css={css`
                 width: 28px;
                 height: 28px;
-                @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+                body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
                   width: ${SPACING.spacing48};
                   height: ${SPACING.spacing48};
                 }
diff --git a/app/src/atoms/StepMeter/index.tsx b/app/src/atoms/StepMeter/index.tsx
index 2c2854dc4d6..13deb0fbf50 100644
--- a/app/src/atoms/StepMeter/index.tsx
+++ b/app/src/atoms/StepMeter/index.tsx
@@ -28,7 +28,7 @@ export const StepMeter = (props: StepMeterProps): JSX.Element => {
     position: ${POSITION_RELATIVE};
     height: ${SPACING.spacing4};
     background-color: ${COLORS.grey30};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       height: ${SPACING.spacing12};
     }
   `
diff --git a/app/src/atoms/buttons/IconButton.tsx b/app/src/atoms/buttons/IconButton.tsx
index 6506b267529..95e943effa8 100644
--- a/app/src/atoms/buttons/IconButton.tsx
+++ b/app/src/atoms/buttons/IconButton.tsx
@@ -38,7 +38,7 @@ export function IconButton(props: IconButtonProps): JSX.Element {
             : COLORS.transparent};
           color: ${COLORS.grey50};
         }
-        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
           cursor: default;
         }
       `}
diff --git a/app/src/atoms/buttons/TextOnlyButton.tsx b/app/src/atoms/buttons/TextOnlyButton.tsx
index 45174218cd9..9350b477f00 100644
--- a/app/src/atoms/buttons/TextOnlyButton.tsx
+++ b/app/src/atoms/buttons/TextOnlyButton.tsx
@@ -10,7 +10,7 @@ const GO_BACK_BUTTON_STYLE = css`
     opacity: 70%;
   }
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     &:hover {
       opacity: 100%;
     }
diff --git a/app/src/molecules/Command/Command.tsx b/app/src/molecules/Command/Command.tsx
index fb8452f2a92..6c2900285c6 100644
--- a/app/src/molecules/Command/Command.tsx
+++ b/app/src/molecules/Command/Command.tsx
@@ -70,7 +70,7 @@ const PROPS_BY_STATE: Record<
       style: `
       border-radius: ${BORDERS.borderRadius4};
       padding: ${SPACING.spacing8};
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
          border-radius: ${BORDERS.borderRadius8};
          padding: ${SPACING.spacing12} ${SPACING.spacing24};
       }
@@ -88,7 +88,7 @@ const PROPS_BY_STATE: Record<
       border-radius: ${BORDERS.borderRadius4};
       padding: ${SPACING.spacing8};
       background-color: ${COLORS.red20};
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
          border-radius: ${BORDERS.borderRadius8};
          padding: ${SPACING.spacing12} ${SPACING.spacing24};
          background-color: ${COLORS.red35};
@@ -106,7 +106,7 @@ const PROPS_BY_STATE: Record<
       background-color: ${COLORS.grey20};
       border-radius: ${BORDERS.borderRadius4};
       padding: ${SPACING.spacing8};
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
          border-radius: ${BORDERS.borderRadius8};
          background-color: ${COLORS.grey35};
          padding: ${SPACING.spacing12} ${SPACING.spacing24};
@@ -138,7 +138,7 @@ export function CenteredCommand(
           margin-right: ${SPACING.spacing8};
           max-height: ${ICON_SIZE_DESKTOP};
           max-width: ${ICON_SIZE_DESKTOP};
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
             margin-right: ${SPACING.spacing12};
             max-height: ${ICON_SIZE_ODD};
             max-width: ${ICON_SIZE_ODD};
@@ -156,7 +156,7 @@ export function CenteredCommand(
         width="100%"
         css={`
           min-height: ${ICON_SIZE_DESKTOP};
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
             min-height: ${ICON_SIZE_ODD};
           }
         `}
@@ -194,7 +194,7 @@ export function LeftAlignedCommand(
           margin-right: ${SPACING.spacing8};
           max-height: ${ICON_SIZE_DESKTOP};
           max-width: ${ICON_SIZE_DESKTOP};
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
             margin-right: ${SPACING.spacing12};
             max-height: ${ICON_SIZE_ODD};
             max-width: ${ICON_SIZE_ODD};
@@ -212,7 +212,7 @@ export function LeftAlignedCommand(
         width="100%"
         css={`
           min-height: ${ICON_SIZE_DESKTOP};
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
             min-height: ${ICON_SIZE_ODD};
           }
         `}
diff --git a/app/src/molecules/Command/CommandIndex.tsx b/app/src/molecules/Command/CommandIndex.tsx
index bcabae9ef90..5dc1ec8e77f 100644
--- a/app/src/molecules/Command/CommandIndex.tsx
+++ b/app/src/molecules/Command/CommandIndex.tsx
@@ -24,7 +24,7 @@ export function CommandIndex({
       width="100%"
       maxWidth={`${Math.max(allowSpaceForNDigits ?? 0, 3)}ch`}
       css={`
-        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
           display: none;
         }
       `}
diff --git a/app/src/molecules/Command/CommandText.tsx b/app/src/molecules/Command/CommandText.tsx
index 75b12733eca..cd5b7299855 100644
--- a/app/src/molecules/Command/CommandText.tsx
+++ b/app/src/molecules/Command/CommandText.tsx
@@ -126,9 +126,9 @@ function ThermocyclerRunProfile(
       {...styleProps}
       alignItems={shouldPropagateCenter ? ALIGN_CENTER : undefined}
       css={`
-        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
           display: flex !important;
-        } ;
+        }
       `}
     >
       <CommandStyledText
diff --git a/app/src/molecules/GenericWizardTile/index.tsx b/app/src/molecules/GenericWizardTile/index.tsx
index 2f7dd88939e..23b091fa43b 100644
--- a/app/src/molecules/GenericWizardTile/index.tsx
+++ b/app/src/molecules/GenericWizardTile/index.tsx
@@ -29,7 +29,7 @@ import { SmallButton, TextOnlyButton } from '../../atoms/buttons'
 const ALIGN_BUTTONS = css`
   align-items: ${ALIGN_FLEX_END};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     align-items: ${ALIGN_CENTER};
   }
 `
@@ -42,7 +42,7 @@ const CAPITALIZE_FIRST_LETTER_STYLE = css`
 
 const Title = styled.h1`
   ${TYPOGRAPHY.h1Default};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     ${TYPOGRAPHY.level4HeaderSemiBold};
     height: ${SPACING.spacing40};
     display: ${DISPLAY_INLINE_BLOCK};
@@ -54,7 +54,7 @@ const TILE_CONTAINER_STYLE = css`
   justify-content: ${JUSTIFY_SPACE_BETWEEN};
   padding: ${SPACING.spacing32};
   height: 24.625rem;
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     height: 29.5rem;
   }
 `
diff --git a/app/src/molecules/InProgressModal/InProgressModal.tsx b/app/src/molecules/InProgressModal/InProgressModal.tsx
index 70d6c3eadc4..9f500b1954a 100644
--- a/app/src/molecules/InProgressModal/InProgressModal.tsx
+++ b/app/src/molecules/InProgressModal/InProgressModal.tsx
@@ -26,7 +26,7 @@ const DESCRIPTION_STYLE = css`
   margin-top: ${SPACING.spacing24};
   margin-bottom: ${SPACING.spacing8};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-weight: ${TYPOGRAPHY.fontWeightBold};
     font-size: ${TYPOGRAPHY.fontSize32};
     margin-top: ${SPACING.spacing32};
@@ -41,7 +41,7 @@ const BODY_STYLE = css`
   ${TYPOGRAPHY.pRegular}
   text-align: ${TYPOGRAPHY.textAlignCenter};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     ${TYPOGRAPHY.level4HeaderRegular}
     color: ${COLORS.grey60}
   }
@@ -52,7 +52,7 @@ const MODAL_STYLE = css`
   justify-content: ${JUSTIFY_CENTER};
   padding: ${SPACING.spacing32};
   height: 24.625rem;
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     max-height: 29.5rem;
     height: 100%;
   }
@@ -61,7 +61,7 @@ const SPINNER_STYLE = css`
   color: ${COLORS.grey60};
   width: 5.125rem;
   height: 5.125rem;
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     width: 6.25rem;
     height: 6.25rem;
   }
@@ -70,7 +70,7 @@ const SPINNER_STYLE = css`
 const DESCRIPTION_CONTAINER_STYLE = css`
   padding-x: 6.5625rem;
   gap: ${SPACING.spacing8};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     padding-x: ${SPACING.spacing40};
     gap: ${SPACING.spacing4};
   }
diff --git a/app/src/molecules/InterventionModal/CategorizedStepContent.stories.tsx b/app/src/molecules/InterventionModal/CategorizedStepContent.stories.tsx
index 4037532cf6f..2e8e2c3d562 100644
--- a/app/src/molecules/InterventionModal/CategorizedStepContent.stories.tsx
+++ b/app/src/molecules/InterventionModal/CategorizedStepContent.stories.tsx
@@ -162,7 +162,7 @@ const meta: Meta<React.ComponentProps<typeof Wrapper>> = {
           border: 4px solid #000000;
           border-radius: ${BORDERS.borderRadius8};
           max-width: 47rem;
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
             max-width: 62rem;
             max-height: 33.5rem;
           }
diff --git a/app/src/molecules/InterventionModal/CategorizedStepContent.tsx b/app/src/molecules/InterventionModal/CategorizedStepContent.tsx
index a9ec14b6876..15d3df4aac1 100644
--- a/app/src/molecules/InterventionModal/CategorizedStepContent.tsx
+++ b/app/src/molecules/InterventionModal/CategorizedStepContent.tsx
@@ -71,7 +71,7 @@ export function CategorizedStepContent(
       justifyContent={JUSTIFY_FLEX_START}
       css={css`
         gap: ${SPACING.spacing16};
-        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
           gap: ${SPACING.spacing24};
         }
       `}
@@ -153,7 +153,7 @@ export function CategorizedStepContent(
 }
 
 const HIDE_ON_TOUCHSCREEN_STYLE = `
-   @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+   body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       display: none;
    }
 `
diff --git a/app/src/molecules/InterventionModal/DeckMapContent.stories.tsx b/app/src/molecules/InterventionModal/DeckMapContent.stories.tsx
index 56c896655e0..ada8f44518b 100644
--- a/app/src/molecules/InterventionModal/DeckMapContent.stories.tsx
+++ b/app/src/molecules/InterventionModal/DeckMapContent.stories.tsx
@@ -118,7 +118,7 @@ const meta: Meta<React.ComponentProps<typeof DeckMapContent>> = {
           border: 4px solid #000000;
           border-radius: ${BORDERS.borderRadius8};
           max-width: 47rem;
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
             max-width: 62rem;
             max-height: 33.5rem;
           }
diff --git a/app/src/molecules/InterventionModal/DescriptionContent.tsx b/app/src/molecules/InterventionModal/DescriptionContent.tsx
index aa1ca395814..2037027e4d6 100644
--- a/app/src/molecules/InterventionModal/DescriptionContent.tsx
+++ b/app/src/molecules/InterventionModal/DescriptionContent.tsx
@@ -36,7 +36,7 @@ export function DescriptionContent(
         flexDirection={DIRECTION_COLUMN}
         css={`
           gap: ${SPACING.spacing16};
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
             gap: ${SPACING.spacing8};
           }
         `}
diff --git a/app/src/molecules/InterventionModal/InterventionContent/InterventionInfo.tsx b/app/src/molecules/InterventionModal/InterventionContent/InterventionInfo.tsx
index 1031519602a..183635e271c 100644
--- a/app/src/molecules/InterventionModal/InterventionContent/InterventionInfo.tsx
+++ b/app/src/molecules/InterventionModal/InterventionContent/InterventionInfo.tsx
@@ -49,7 +49,7 @@ export function InterventionInfo(props: InterventionInfoProps): JSX.Element {
             color={COLORS.grey60}
             css={css`
               ${LINE_CLAMP_STYLE}
-              @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+              body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
                 display: none;
               }
             `}
@@ -61,7 +61,7 @@ export function InterventionInfo(props: InterventionInfoProps): JSX.Element {
       <Divider
         borderColor={COLORS.grey35}
         css={`
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
             display: none;
           }
         `}
@@ -91,7 +91,7 @@ const buildLocArrowLoc = (props: InterventionInfoProps): JSX.Element => {
         alignItems={ALIGN_CENTER}
         css={`
           gap: ${SPACING.spacing4};
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
             gap: ${SPACING.spacing8};
           }
         `}
@@ -125,7 +125,7 @@ const buildLocColonLoc = (props: InterventionInfoProps): JSX.Element => {
         alignItems={ALIGN_CENTER}
         css={`
           gap: ${SPACING.spacing4};
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
             gap: ${SPACING.spacing8};
           }
         `}
@@ -143,7 +143,7 @@ const buildLocColonLoc = (props: InterventionInfoProps): JSX.Element => {
 const ICON_STYLE = css`
   width: ${SPACING.spacing24};
   height: ${SPACING.spacing24};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     width: ${SPACING.spacing40};
     height: ${SPACING.spacing40};
   }
@@ -153,7 +153,7 @@ const CARD_STYLE = css`
   background-color: ${COLORS.grey20};
   border-radius: ${BORDERS.borderRadius4};
   gap: ${SPACING.spacing8};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     background-color: ${COLORS.grey35};
     border-radius: ${BORDERS.borderRadius8};
   }
diff --git a/app/src/molecules/InterventionModal/InterventionContent/index.tsx b/app/src/molecules/InterventionModal/InterventionContent/index.tsx
index cc52255e4f9..016482341a7 100644
--- a/app/src/molecules/InterventionModal/InterventionContent/index.tsx
+++ b/app/src/molecules/InterventionModal/InterventionContent/index.tsx
@@ -29,7 +29,7 @@ export function InterventionContent({
       css={`
         gap: ${SPACING.spacing16};
         width: 100%;
-        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
           gap: ${SPACING.spacing8};
           width: 27rem;
         }
@@ -46,7 +46,7 @@ export function InterventionContent({
         css={`
           gap: ${SPACING.spacing16};
           width: 100%;
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
             gap: ${SPACING.spacing24};
           }
         `}
diff --git a/app/src/molecules/InterventionModal/ModalContentMixed.tsx b/app/src/molecules/InterventionModal/ModalContentMixed.tsx
index 08c5787b1db..ad72b57777e 100644
--- a/app/src/molecules/InterventionModal/ModalContentMixed.tsx
+++ b/app/src/molecules/InterventionModal/ModalContentMixed.tsx
@@ -80,7 +80,7 @@ export function ModalContentMixed(props: ModalContentMixedProps): JSX.Element {
         css={`
           gap: ${SPACING.spacing8};
 
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
             gap: ${SPACING.spacing4};
           }
         `}
@@ -132,7 +132,7 @@ function ModalContentMixedIcon(props: ModalContentMixedIconProps): JSX.Element {
       css={`
         width: ${SPACING.spacing40};
         margin-bottom: ${SPACING.spacing16};
-        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
           width: ${SPACING.spacing60};
           margin-bottom: ${SPACING.spacing24};
         }
@@ -155,7 +155,7 @@ function ModalContentMixedSpinner(
       marginBottom={SPACING.spacing16}
       width={'80px'}
       css={`
-        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
           width: 100px;
           margin-bottom: ${SPACING.spacing24};
         }
@@ -177,7 +177,7 @@ function ModalContentMixedImage(
       css={`
         height: 150px;
         margin-bottom: ${SPACING.spacing16};
-        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
           height: 180px;
           margin-bottom: ${SPACING.spacing24};
         }
diff --git a/app/src/molecules/InterventionModal/OneColumn.stories.tsx b/app/src/molecules/InterventionModal/OneColumn.stories.tsx
index ef4e8a6a02f..f71d0acebe3 100644
--- a/app/src/molecules/InterventionModal/OneColumn.stories.tsx
+++ b/app/src/molecules/InterventionModal/OneColumn.stories.tsx
@@ -14,7 +14,7 @@ const meta: Meta<React.ComponentProps<typeof OneColumnComponent>> = {
     <Box
       css={`
         width: 500;
-        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
           width: 500;
         }
       `}
diff --git a/app/src/molecules/InterventionModal/OneColumnOrTwoColumn.stories.tsx b/app/src/molecules/InterventionModal/OneColumnOrTwoColumn.stories.tsx
index 791edcbdb83..74cb4bc94fd 100644
--- a/app/src/molecules/InterventionModal/OneColumnOrTwoColumn.stories.tsx
+++ b/app/src/molecules/InterventionModal/OneColumnOrTwoColumn.stories.tsx
@@ -50,7 +50,7 @@ const meta: Meta<React.ComponentProps<typeof Wrapper>> = {
       <VisibleContainer
         css={css`
           min-width: min(max-content, 100vw);
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
             width: 500px;
           }
         `}
diff --git a/app/src/molecules/InterventionModal/OneColumnOrTwoColumn.tsx b/app/src/molecules/InterventionModal/OneColumnOrTwoColumn.tsx
index 8a6455d67e3..a99e455e868 100644
--- a/app/src/molecules/InterventionModal/OneColumnOrTwoColumn.tsx
+++ b/app/src/molecules/InterventionModal/OneColumnOrTwoColumn.tsx
@@ -31,7 +31,7 @@ export function OneColumnOrTwoColumn({
         flex="1"
         css={css`
           min-width: ${TWO_COLUMN_ELEMENT_MIN_WIDTH};
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
             min-width: none;
             width: 100%;
           }
@@ -43,7 +43,7 @@ export function OneColumnOrTwoColumn({
         flex="1"
         minWidth={TWO_COLUMN_ELEMENT_MIN_WIDTH}
         css={css`
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
             display: none;
           }
         `}
diff --git a/app/src/molecules/JogControls/DirectionControl.tsx b/app/src/molecules/JogControls/DirectionControl.tsx
index 046ef173eed..3b734fa5702 100644
--- a/app/src/molecules/JogControls/DirectionControl.tsx
+++ b/app/src/molecules/JogControls/DirectionControl.tsx
@@ -319,7 +319,7 @@ const ARROW_GRID_STYLES = css`
   @media (max-width: 750px) {
     max-width: 12.5rem;
   }
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     max-width: 415px;
     grid-gap: ${SPACING.spacing20};
     grid-template-areas:
@@ -366,7 +366,7 @@ const ARROW_BUTTON_STYLES = css`
     width: 4rem;
     height: 4rem;
   }
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     width: 125px;
     height: 125px;
     background-color: ${COLORS.grey35};
@@ -399,7 +399,7 @@ const ARROW_ICON_STYLES = css`
   height: 1.125rem;
   width: 1.125rem;
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     width: 84px;
     height: 84px;
   }
diff --git a/app/src/molecules/SimpleWizardBody/SimpleWizardBodyContainer.tsx b/app/src/molecules/SimpleWizardBody/SimpleWizardBodyContainer.tsx
index 11644dba212..9086e7ea24c 100644
--- a/app/src/molecules/SimpleWizardBody/SimpleWizardBodyContainer.tsx
+++ b/app/src/molecules/SimpleWizardBody/SimpleWizardBodyContainer.tsx
@@ -14,7 +14,7 @@ const WIZARD_CONTAINER_STYLE = css`
   flex-direction: ${DIRECTION_COLUMN};
   justify-content: ${JUSTIFY_SPACE_BETWEEN};
   height: 'auto';
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     height: 472px;
   }
 `
diff --git a/app/src/molecules/SimpleWizardBody/SimpleWizardBodyContent.tsx b/app/src/molecules/SimpleWizardBody/SimpleWizardBodyContent.tsx
index 5e79b1ff8bd..3751b36a28e 100644
--- a/app/src/molecules/SimpleWizardBody/SimpleWizardBodyContent.tsx
+++ b/app/src/molecules/SimpleWizardBody/SimpleWizardBodyContent.tsx
@@ -46,7 +46,7 @@ const HEADER_STYLE = css`
   margin-top: ${SPACING.spacing24};
   margin-bottom: ${SPACING.spacing8};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-size: 2rem;
     font-weight: 700;
     line-height: ${SPACING.spacing40};
@@ -60,7 +60,7 @@ const SUBHEADER_STYLE = css`
   text-align: ${TYPOGRAPHY.textAlignCenter};
   height: 1.75rem;
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-size: ${TYPOGRAPHY.fontSize28};
     line-height: ${TYPOGRAPHY.lineHeight36};
     margin-left: 4.5rem;
@@ -71,7 +71,7 @@ const SUBHEADER_STYLE = css`
 const FLEX_SPACING_STYLE = css`
   height: 1.75rem;
   margin-bottom: ${SPACING.spacing32};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     height: 0rem;
   }
 `
@@ -94,7 +94,7 @@ export function SimpleWizardBodyContent(props: Props): JSX.Element {
     padding-right: ${SPACING.spacing32};
     padding-bottom: ${SPACING.spacing32};
 
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       justify-content: ${props.justifyContentForOddButton ??
       JUSTIFY_SPACE_BETWEEN};
       padding-bottom: ${SPACING.spacing32};
@@ -105,7 +105,7 @@ export function SimpleWizardBodyContent(props: Props): JSX.Element {
   const ICON_POSITION_STYLE = css`
     justify-content: ${JUSTIFY_CENTER};
 
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       justify-content: ${JUSTIFY_FLEX_START};
       margin-top: ${isSuccess ? SPACING.spacing32 : '8.1875rem'};
     }
diff --git a/app/src/molecules/WizardHeader/index.tsx b/app/src/molecules/WizardHeader/index.tsx
index 04dc2baeae0..58a924e12fa 100644
--- a/app/src/molecules/WizardHeader/index.tsx
+++ b/app/src/molecules/WizardHeader/index.tsx
@@ -33,7 +33,7 @@ const EXIT_BUTTON_STYLE = css`
   &:hover {
     color: ${COLORS.grey50};
   }
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     margin-right: 1.75rem;
     font-size: ${TYPOGRAPHY.fontSize22};
     font-weight: ${TYPOGRAPHY.fontWeightBold};
@@ -47,7 +47,7 @@ const EXIT_BUTTON_STYLE = css`
 `
 const BOX_STYLE = css`
   background-color: ${COLORS.white};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     border-radius: ${BORDERS.borderRadius16};
   }
 `
@@ -55,14 +55,14 @@ const HEADER_CONTAINER_STYLE = css`
   flex-direction: ${DIRECTION_ROW};
   justify-content: ${JUSTIFY_SPACE_BETWEEN};
   padding: ${SPACING.spacing16} ${SPACING.spacing32};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     padding: 1.75rem ${SPACING.spacing32};
     border-radius: ${BORDERS.borderRadius16};
   }
 `
 const HEADER_TEXT_STYLE = css`
   ${TYPOGRAPHY.pSemiBold}
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-size: ${TYPOGRAPHY.fontSize22};
     font-weight: ${TYPOGRAPHY.fontWeightBold};
     line-height: ${TYPOGRAPHY.lineHeight28};
@@ -71,7 +71,7 @@ const HEADER_TEXT_STYLE = css`
 const STEP_TEXT_STYLE = css`
   ${TYPOGRAPHY.pSemiBold}
   color: ${COLORS.grey60};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-size: 1.375rem;
     margin-left: ${SPACING.spacing16};
   }
diff --git a/app/src/organisms/ChildNavigation/index.tsx b/app/src/organisms/ChildNavigation/index.tsx
index 00e8d02c36b..03ced261be5 100644
--- a/app/src/organisms/ChildNavigation/index.tsx
+++ b/app/src/organisms/ChildNavigation/index.tsx
@@ -127,7 +127,7 @@ const IconButton = styled('button')`
   &:disabled {
     background-color: transparent;
   }
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     cursor: default;
   }
 `
diff --git a/app/src/organisms/DropTipWizardFlows/BeforeBeginning.tsx b/app/src/organisms/DropTipWizardFlows/BeforeBeginning.tsx
index 782b8bc6764..91cc7bb7a43 100644
--- a/app/src/organisms/DropTipWizardFlows/BeforeBeginning.tsx
+++ b/app/src/organisms/DropTipWizardFlows/BeforeBeginning.tsx
@@ -204,7 +204,7 @@ const UNSELECTED_OPTIONS_STYLE = css`
     border: 1px solid ${COLORS.grey35};
   }
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     flex-direction: ${DIRECTION_ROW};
     justify-content: ${JUSTIFY_FLEX_START};
     background-color: ${COLORS.blue35};
@@ -224,7 +224,7 @@ const SELECTED_OPTIONS_STYLE = css`
   border: 1px solid ${COLORS.blue50};
   background-color: ${COLORS.blue30};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     border-width: 0px;
     background-color: ${COLORS.blue50};
     color: ${COLORS.white};
@@ -239,7 +239,7 @@ const SELECTED_OPTIONS_STYLE = css`
 const Title = styled.h1`
   ${TYPOGRAPHY.h1Default};
   margin-bottom: ${SPACING.spacing8};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     ${TYPOGRAPHY.level4HeaderSemiBold};
     margin-bottom: 0;
     height: ${SPACING.spacing40};
@@ -257,7 +257,7 @@ const TILE_CONTAINER_STYLE = css`
   justify-content: ${JUSTIFY_SPACE_BETWEEN};
   padding: ${SPACING.spacing32};
   height: 100%;
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     height: 29.5rem;
   }
 `
diff --git a/app/src/organisms/DropTipWizardFlows/ChooseLocation.tsx b/app/src/organisms/DropTipWizardFlows/ChooseLocation.tsx
index 18766553999..e39e9e6c160 100644
--- a/app/src/organisms/DropTipWizardFlows/ChooseLocation.tsx
+++ b/app/src/organisms/DropTipWizardFlows/ChooseLocation.tsx
@@ -40,7 +40,7 @@ type ChooseLocationProps = DropTipWizardContainerProps & {
 const Title = styled.h1`
   ${TYPOGRAPHY.h1Default};
   margin-bottom: ${SPACING.spacing8};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     ${TYPOGRAPHY.level4HeaderSemiBold};
     margin-bottom: 0;
     height: ${SPACING.spacing40};
@@ -113,7 +113,7 @@ export const ChooseLocation = (
         <PrimaryButton
           onClick={handleConfirmPosition}
           css={css`
-            @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+            body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
               display: none;
             }
           `}
@@ -137,7 +137,7 @@ export const ChooseLocation = (
 const ALIGN_BUTTONS = css`
   align-items: ${ALIGN_FLEX_END};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     align-items: ${ALIGN_CENTER};
   }
 `
@@ -146,7 +146,7 @@ const CONTAINER_STYLE = css`
   flex-direction: ${DIRECTION_COLUMN};
   justify-content: ${JUSTIFY_SPACE_BETWEEN};
   padding: ${SPACING.spacing32};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     justify-content: ${JUSTIFY_FLEX_START};
     gap: ${SPACING.spacing32};
     padding: none;
diff --git a/app/src/organisms/DropTipWizardFlows/DropTipWizard.tsx b/app/src/organisms/DropTipWizardFlows/DropTipWizard.tsx
index aaf2acf7706..980b906bb13 100644
--- a/app/src/organisms/DropTipWizardFlows/DropTipWizard.tsx
+++ b/app/src/organisms/DropTipWizardFlows/DropTipWizard.tsx
@@ -416,7 +416,7 @@ function useInitiateExit(): {
 }
 
 const ERROR_MODAL_FIXIT_STYLE = css`
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     margin-top: -${SPACING.spacing68}; // See EXEC-520. This clearly isn't ideal.
   }
 `
diff --git a/app/src/organisms/DropTipWizardFlows/JogToPosition.tsx b/app/src/organisms/DropTipWizardFlows/JogToPosition.tsx
index 7ecc9c4a1e1..6cf9823791b 100644
--- a/app/src/organisms/DropTipWizardFlows/JogToPosition.tsx
+++ b/app/src/organisms/DropTipWizardFlows/JogToPosition.tsx
@@ -35,7 +35,7 @@ import type { DropTipWizardContainerProps } from './types'
 
 const Header = styled.h1`
   ${TYPOGRAPHY.h1Default}
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     ${TYPOGRAPHY.level4HeaderSemiBold}
   }
 `
diff --git a/app/src/organisms/DropTipWizardFlows/Success.tsx b/app/src/organisms/DropTipWizardFlows/Success.tsx
index 5e72dd66281..55dca083445 100644
--- a/app/src/organisms/DropTipWizardFlows/Success.tsx
+++ b/app/src/organisms/DropTipWizardFlows/Success.tsx
@@ -84,7 +84,7 @@ const WIZARD_CONTAINER_STYLE = css`
   min-height: 394px;
   flex-direction: ${DIRECTION_COLUMN};
   justify-content: ${JUSTIFY_CENTER};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     height: 472px;
   }
 `
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryDoorOpen.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryDoorOpen.tsx
index 17bf1cf0379..1005e63725d 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryDoorOpen.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryDoorOpen.tsx
@@ -83,7 +83,7 @@ const TEXT_STYLE = css`
   align-items: ${ALIGN_CENTER};
   text-align: ${TEXT_ALIGN_CENTER};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     grid-gap: ${SPACING.spacing4};
   }
 `
@@ -93,7 +93,7 @@ const ICON_STYLE = css`
   width: ${SPACING.spacing40};
   color: ${COLORS.yellow50};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     height: ${SPACING.spacing60};
     width: ${SPACING.spacing60};
   }
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryInProgress.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryInProgress.tsx
index 0f3f3fdb227..34c1496844b 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryInProgress.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryInProgress.tsx
@@ -65,7 +65,7 @@ const CONTAINER_STYLE = css`
   grid-gap: ${SPACING.spacing16};
   width: 100%;
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     grid-gap: ${SPACING.spacing24};
   }
 `
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryContentWrapper.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryContentWrapper.tsx
index b9acdcc8cae..babb9330f33 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryContentWrapper.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryContentWrapper.tsx
@@ -105,7 +105,7 @@ const STYLE = css`
   gap: ${SPACING.spacing24};
   width: 100%;
   height: 100%;
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     gap: none;
   }
 `
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryFooterButtons.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryFooterButtons.tsx
index c9042cfc55f..f1beaacd3a1 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryFooterButtons.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryFooterButtons.tsx
@@ -202,7 +202,7 @@ const ODD_ONLY_BUTTON = css`
 `
 
 const DESKTOP_ONLY_BUTTON = css`
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     display: none;
   }
 `
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryInterventionModal.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryInterventionModal.tsx
index e044d46054f..50b54de821f 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryInterventionModal.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryInterventionModal.tsx
@@ -51,7 +51,7 @@ const SMALL_MODAL_STYLE = css`
   height: 22rem;
   padding: ${SPACING.spacing32};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     padding: ${SPACING.spacing32};
     height: 100%;
   }
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/TwoColTextAndFailedStepNextStep.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/TwoColTextAndFailedStepNextStep.tsx
index a1f959c72fb..b6ce2d73632 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/TwoColTextAndFailedStepNextStep.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/TwoColTextAndFailedStepNextStep.tsx
@@ -47,7 +47,7 @@ export function TwoColTextAndFailedStepNextStep(
           flexDirection={DIRECTION_COLUMN}
           css={css`
             gap: ${SPACING.spacing16};
-            @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+            body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
               gap: ${SPACING.spacing8};
             }
           `}
diff --git a/app/src/organisms/FirmwareUpdateModal/UpdateInProgressModal.tsx b/app/src/organisms/FirmwareUpdateModal/UpdateInProgressModal.tsx
index 93f74c21efc..72e9009029b 100644
--- a/app/src/organisms/FirmwareUpdateModal/UpdateInProgressModal.tsx
+++ b/app/src/organisms/FirmwareUpdateModal/UpdateInProgressModal.tsx
@@ -23,7 +23,7 @@ interface UpdateInProgressModalProps {
 const SPINNER_STYLE = css`
   color: ${COLORS.grey50};
   opacity: 100%;
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     color: ${COLORS.black90};
     opacity: 70%;
   }
diff --git a/app/src/organisms/FirmwareUpdateModal/index.tsx b/app/src/organisms/FirmwareUpdateModal/index.tsx
index cb449588ea1..3bce6707fbc 100644
--- a/app/src/organisms/FirmwareUpdateModal/index.tsx
+++ b/app/src/organisms/FirmwareUpdateModal/index.tsx
@@ -32,7 +32,7 @@ const DESCRIPTION_STYLE = css`
   margin-top: ${SPACING.spacing8};
   margin-bottom: ${SPACING.spacing24};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-weight: ${TYPOGRAPHY.fontWeightBold};
     font-size: ${TYPOGRAPHY.fontSize32};
     margin-top: ${SPACING.spacing4};
@@ -49,7 +49,7 @@ const MODAL_STYLE = css`
   justify-content: ${JUSTIFY_CENTER};
   padding: ${SPACING.spacing32};
   height: 24.625rem;
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     height: 31.5625rem;
   }
 `
@@ -57,7 +57,7 @@ const MODAL_STYLE = css`
 const SPINNER_STYLE = css`
   color: ${COLORS.grey50};
   opacity: 100%;
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     color: ${COLORS.black90};
     opacity: 70%;
   }
diff --git a/app/src/organisms/GripperWizardFlows/MountGripper.tsx b/app/src/organisms/GripperWizardFlows/MountGripper.tsx
index 7f69bf389ac..217246855aa 100644
--- a/app/src/organisms/GripperWizardFlows/MountGripper.tsx
+++ b/app/src/organisms/GripperWizardFlows/MountGripper.tsx
@@ -37,7 +37,7 @@ const GO_BACK_BUTTON_STYLE = css`
     opacity: 70%;
   }
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
     font-size: ${TYPOGRAPHY.fontSize22};
     padding-left: 0rem;
@@ -51,7 +51,7 @@ const QUICK_GRIPPER_POLL_MS = 3000
 const ALIGN_BUTTONS = css`
   align-items: ${ALIGN_FLEX_END};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     align-items: ${ALIGN_CENTER};
   }
 `
diff --git a/app/src/organisms/GripperWizardFlows/UnmountGripper.tsx b/app/src/organisms/GripperWizardFlows/UnmountGripper.tsx
index 46b62bdf40d..830fb9c88a8 100644
--- a/app/src/organisms/GripperWizardFlows/UnmountGripper.tsx
+++ b/app/src/organisms/GripperWizardFlows/UnmountGripper.tsx
@@ -36,7 +36,7 @@ const GO_BACK_BUTTON_TEXT_STYLE = css`
     opacity: 70%;
   }
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
     font-size: ${TYPOGRAPHY.fontSize22};
     line-height: ${TYPOGRAPHY.lineHeight28};
diff --git a/app/src/organisms/InterventionModal/InterventionCommandMessage.tsx b/app/src/organisms/InterventionModal/InterventionCommandMessage.tsx
index 97fc9e7f69c..e3d365ed49e 100644
--- a/app/src/organisms/InterventionModal/InterventionCommandMessage.tsx
+++ b/app/src/organisms/InterventionModal/InterventionCommandMessage.tsx
@@ -17,7 +17,7 @@ import {
 const INTERVENTION_COMMAND_STYLE = css`
   flex-direction: ${DIRECTION_COLUMN};
   grid-gap: ${SPACING.spacing4};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     grid-gap: 0;
   }
 `
@@ -26,7 +26,7 @@ const INTERVENTION_COMMAND_NOTES_STYLE = css`
   ${TYPOGRAPHY.h6Default}
   color: ${COLORS.grey60};
   text-transform: ${TEXT_TRANSFORM_UPPERCASE};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     ${TYPOGRAPHY.smallBodyTextBold}
     color: ${COLORS.black90};
     text-transform: ${TEXT_TRANSFORM_CAPITALIZE};
@@ -35,7 +35,7 @@ const INTERVENTION_COMMAND_NOTES_STYLE = css`
 
 const INTERVENTION_COMMAND_MESSAGE_STYLE = css`
   ${TYPOGRAPHY.pRegular}
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     ${TYPOGRAPHY.smallBodyTextRegular}
   }
 `
diff --git a/app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx b/app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx
index f8692794081..e68ea3f3fb5 100644
--- a/app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx
+++ b/app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx
@@ -60,7 +60,7 @@ const LABWARE_DESCRIPTION_STYLE = css`
   padding: ${SPACING.spacing16};
   background-color: ${COLORS.grey20};
   border-radius: ${BORDERS.borderRadius4};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     background-color: ${COLORS.grey35};
     border-radius: ${BORDERS.borderRadius8};
   }
@@ -68,21 +68,21 @@ const LABWARE_DESCRIPTION_STYLE = css`
 
 const LABWARE_NAME_TITLE_STYLE = css`
   font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     display: ${DISPLAY_NONE};
   }
 `
 
 const LABWARE_NAME_STYLE = css`
   color: ${COLORS.grey60};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     ${TYPOGRAPHY.bodyTextBold}
     color: ${COLORS.black90};
   }
 `
 
 const DIVIDER_STYLE = css`
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     display: ${DISPLAY_NONE};
   }
 `
@@ -91,14 +91,14 @@ const LABWARE_DIRECTION_STYLE = css`
   align-items: ${ALIGN_CENTER};
   grid-gap: ${SPACING.spacing4};
   text-transform: ${TEXT_TRANSFORM_UPPERCASE};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     grid-gap: ${SPACING.spacing8};
   }
 `
 
 const ICON_STYLE = css`
   height: 1.5rem;
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     height: 2.5rem;
   }
 `
diff --git a/app/src/organisms/InterventionModal/PauseInterventionContent.tsx b/app/src/organisms/InterventionModal/PauseInterventionContent.tsx
index f3f617f20fd..b477de7439c 100644
--- a/app/src/organisms/InterventionModal/PauseInterventionContent.tsx
+++ b/app/src/organisms/InterventionModal/PauseInterventionContent.tsx
@@ -23,7 +23,7 @@ const PAUSE_INTERVENTION_CONTENT_STYLE = css`
   flex-direction: ${DIRECTION_COLUMN};
   grid-gap: ${SPACING.spacing12};
   width: 100%;
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     grid-gap: ${SPACING.spacing20};
   }
 `
@@ -51,7 +51,7 @@ const PAUSE_HEADER_STYLE = css`
   border-radius: ${BORDERS.borderRadius4};
   grid-gap: ${SPACING.spacing6};
   padding: ${SPACING.spacing16};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     align-self: ${ALIGN_CENTER};
     background-color: ${COLORS.grey35};
     border-radius: ${BORDERS.borderRadius8};
@@ -63,14 +63,14 @@ const PAUSE_HEADER_STYLE = css`
 
 const PAUSE_TEXT_STYLE = css`
   ${TYPOGRAPHY.h1Default}
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     ${TYPOGRAPHY.level4HeaderSemiBold}
   }
 `
 
 const PAUSE_TIME_STYLE = css`
   ${TYPOGRAPHY.h1Default}
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     ${TYPOGRAPHY.level1Header}
   }
 `
diff --git a/app/src/organisms/LabwarePositionCheck/AttachProbe.tsx b/app/src/organisms/LabwarePositionCheck/AttachProbe.tsx
index 1b232f00d51..674e77c0fdc 100644
--- a/app/src/organisms/LabwarePositionCheck/AttachProbe.tsx
+++ b/app/src/organisms/LabwarePositionCheck/AttachProbe.tsx
@@ -190,7 +190,7 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => {
 export const BODY_STYLE = css`
   ${TYPOGRAPHY.pRegular};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-size: 1.275rem;
     line-height: 1.75rem;
   }
diff --git a/app/src/organisms/LabwarePositionCheck/DetachProbe.tsx b/app/src/organisms/LabwarePositionCheck/DetachProbe.tsx
index 303fbf4f84e..3f62edd6b9f 100644
--- a/app/src/organisms/LabwarePositionCheck/DetachProbe.tsx
+++ b/app/src/organisms/LabwarePositionCheck/DetachProbe.tsx
@@ -147,7 +147,7 @@ export const DetachProbe = (props: DetachProbeProps): JSX.Element | null => {
 export const BODY_STYLE = css`
   ${TYPOGRAPHY.pRegular};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-size: 1.275rem;
     line-height: 1.75rem;
   }
diff --git a/app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx b/app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx
index 1f03223c0c7..7004bc11e89 100644
--- a/app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx
+++ b/app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx
@@ -123,7 +123,7 @@ export const ExitConfirmation = (props: ExitConfirmationProps): JSX.Element => {
 const ConfirmationHeader = styled.h1`
   margin-top: ${SPACING.spacing24};
   ${TYPOGRAPHY.h1Default}
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     ${TYPOGRAPHY.level4HeaderSemiBold}
   }
 `
@@ -131,13 +131,13 @@ const ConfirmationHeader = styled.h1`
 const ConfirmationHeaderODD = styled.h1`
   margin-top: ${SPACING.spacing24};
   ${TYPOGRAPHY.level3HeaderBold}
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     ${TYPOGRAPHY.level4HeaderSemiBold}
   }
 `
 const ConfirmationBodyODD = styled.h1`
   ${TYPOGRAPHY.level4HeaderRegular}
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     ${TYPOGRAPHY.level4HeaderRegular}
   }
   color: ${COLORS.grey60};
diff --git a/app/src/organisms/LabwarePositionCheck/FatalErrorModal.tsx b/app/src/organisms/LabwarePositionCheck/FatalErrorModal.tsx
index 54b0503c19d..00b332a4bae 100644
--- a/app/src/organisms/LabwarePositionCheck/FatalErrorModal.tsx
+++ b/app/src/organisms/LabwarePositionCheck/FatalErrorModal.tsx
@@ -92,7 +92,7 @@ const ErrorHeader = styled.h1`
   text-align: ${TEXT_ALIGN_CENTER};
   ${TYPOGRAPHY.h1Default}
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     ${TYPOGRAPHY.level4HeaderSemiBold}
   }
 `
diff --git a/app/src/organisms/LabwarePositionCheck/JogToWell.tsx b/app/src/organisms/LabwarePositionCheck/JogToWell.tsx
index 81e89741546..0049e6f94f6 100644
--- a/app/src/organisms/LabwarePositionCheck/JogToWell.tsx
+++ b/app/src/organisms/LabwarePositionCheck/JogToWell.tsx
@@ -266,7 +266,7 @@ export const JogToWell = (props: JogToWellProps): JSX.Element | null => {
 const Header = styled.h1`
   ${TYPOGRAPHY.h1Default}
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     ${TYPOGRAPHY.level4HeaderSemiBold}
   }
 `
diff --git a/app/src/organisms/LabwarePositionCheck/PrepareSpace.tsx b/app/src/organisms/LabwarePositionCheck/PrepareSpace.tsx
index ad3df11c6aa..5e54e93c9ce 100644
--- a/app/src/organisms/LabwarePositionCheck/PrepareSpace.tsx
+++ b/app/src/organisms/LabwarePositionCheck/PrepareSpace.tsx
@@ -39,7 +39,7 @@ const TILE_CONTAINER_STYLE = css`
   padding: ${SPACING.spacing32};
   height: 24.625rem;
   flex: 1;
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     height: 29.5rem;
   }
 `
@@ -47,7 +47,7 @@ const TILE_CONTAINER_STYLE = css`
 const Title = styled.h1`
   ${TYPOGRAPHY.h1Default};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     ${TYPOGRAPHY.level4HeaderSemiBold};
   }
 `
diff --git a/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx b/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx
index 3459b095f61..fe762a3c25d 100644
--- a/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx
+++ b/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx
@@ -256,7 +256,7 @@ const TableDatum = styled('td')`
 const Header = styled.h1`
   ${TYPOGRAPHY.h1Default}
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     ${TYPOGRAPHY.level4HeaderSemiBold}
   }
 `
diff --git a/app/src/organisms/LabwarePositionCheck/RobotMotionLoader.tsx b/app/src/organisms/LabwarePositionCheck/RobotMotionLoader.tsx
index dbb5f6973f2..638197628c4 100644
--- a/app/src/organisms/LabwarePositionCheck/RobotMotionLoader.tsx
+++ b/app/src/organisms/LabwarePositionCheck/RobotMotionLoader.tsx
@@ -47,7 +47,7 @@ const LoadingText = styled.h1`
     text-transform: uppercase;
   }
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     ${TYPOGRAPHY.level4HeaderSemiBold}
   }
 `
diff --git a/app/src/organisms/LabwarePositionCheck/TwoUpTileLayout.tsx b/app/src/organisms/LabwarePositionCheck/TwoUpTileLayout.tsx
index 44ee775f25a..260001ff883 100644
--- a/app/src/organisms/LabwarePositionCheck/TwoUpTileLayout.tsx
+++ b/app/src/organisms/LabwarePositionCheck/TwoUpTileLayout.tsx
@@ -15,7 +15,7 @@ import {
 const Title = styled.h1`
   ${TYPOGRAPHY.h1Default};
   margin-bottom: ${SPACING.spacing8};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     ${TYPOGRAPHY.level4HeaderSemiBold};
     margin-bottom: 0;
     height: ${SPACING.spacing40};
@@ -28,7 +28,7 @@ const TILE_CONTAINER_STYLE = css`
   justify-content: ${JUSTIFY_SPACE_BETWEEN};
   padding: ${SPACING.spacing32};
   height: 24.625rem;
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     height: 29.5rem;
   }
 `
diff --git a/app/src/organisms/ModuleWizardFlows/AttachProbe.tsx b/app/src/organisms/ModuleWizardFlows/AttachProbe.tsx
index 94af0fcdd40..810fcff5e2e 100644
--- a/app/src/organisms/ModuleWizardFlows/AttachProbe.tsx
+++ b/app/src/organisms/ModuleWizardFlows/AttachProbe.tsx
@@ -32,7 +32,7 @@ interface AttachProbeProps extends ModuleCalibrationWizardStepProps {
 
 const BODY_STYLE = css`
   ${TYPOGRAPHY.pRegular};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-size: 1.275rem;
     line-height: 1.75rem;
   }
diff --git a/app/src/organisms/ModuleWizardFlows/DetachProbe.tsx b/app/src/organisms/ModuleWizardFlows/DetachProbe.tsx
index c95d515c4f8..8e4b13c5deb 100644
--- a/app/src/organisms/ModuleWizardFlows/DetachProbe.tsx
+++ b/app/src/organisms/ModuleWizardFlows/DetachProbe.tsx
@@ -18,7 +18,7 @@ import type { ModuleCalibrationWizardStepProps } from './types'
 const BODY_STYLE = css`
   ${TYPOGRAPHY.pRegular};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-size: 1.275rem;
     line-height: 1.75rem;
   }
diff --git a/app/src/organisms/ModuleWizardFlows/PlaceAdapter.tsx b/app/src/organisms/ModuleWizardFlows/PlaceAdapter.tsx
index 7e044b1db46..30ac5fd9581 100644
--- a/app/src/organisms/ModuleWizardFlows/PlaceAdapter.tsx
+++ b/app/src/organisms/ModuleWizardFlows/PlaceAdapter.tsx
@@ -56,7 +56,7 @@ interface PlaceAdapterProps extends ModuleCalibrationWizardStepProps {
 export const BODY_STYLE = css`
   ${TYPOGRAPHY.pRegular};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-size: 1.275rem;
     line-height: 1.75rem;
   }
diff --git a/app/src/organisms/ModuleWizardFlows/SelectLocation.tsx b/app/src/organisms/ModuleWizardFlows/SelectLocation.tsx
index 0b110f3bce4..a317835a245 100644
--- a/app/src/organisms/ModuleWizardFlows/SelectLocation.tsx
+++ b/app/src/organisms/ModuleWizardFlows/SelectLocation.tsx
@@ -37,7 +37,7 @@ import type {
 export const BODY_STYLE = css`
   ${TYPOGRAPHY.pRegular};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-size: 1.275rem;
     line-height: 1.75rem;
   }
diff --git a/app/src/organisms/ModuleWizardFlows/Success.tsx b/app/src/organisms/ModuleWizardFlows/Success.tsx
index 86f4f044fec..2f91410b4a9 100644
--- a/app/src/organisms/ModuleWizardFlows/Success.tsx
+++ b/app/src/organisms/ModuleWizardFlows/Success.tsx
@@ -16,7 +16,7 @@ import type { ModuleCalibrationWizardStepProps } from './types'
 export const BODY_STYLE = css`
   ${TYPOGRAPHY.pRegular};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-size: 1.275rem;
     line-height: 1.75rem;
   }
diff --git a/app/src/organisms/Navigation/index.tsx b/app/src/organisms/Navigation/index.tsx
index a9a55f53e63..90688d6f817 100644
--- a/app/src/organisms/Navigation/index.tsx
+++ b/app/src/organisms/Navigation/index.tsx
@@ -222,7 +222,7 @@ const TouchNavLink = styled(NavLink)`
     background-color: ${COLORS.purple50};
   }
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     cursor: default;
   }
 `
@@ -245,7 +245,7 @@ const IconButton = styled('button')`
   &:disabled {
     background-color: transparent;
   }
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     cursor: default;
   }
 `
diff --git a/app/src/organisms/PipetteWizardFlows/AttachProbe.tsx b/app/src/organisms/PipetteWizardFlows/AttachProbe.tsx
index 86652e4f558..777c5f3c74c 100644
--- a/app/src/organisms/PipetteWizardFlows/AttachProbe.tsx
+++ b/app/src/organisms/PipetteWizardFlows/AttachProbe.tsx
@@ -35,7 +35,7 @@ const IN_PROGRESS_STYLE = css`
   ${TYPOGRAPHY.pRegular};
   text-align: ${TYPOGRAPHY.textAlignCenter};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-size: ${TYPOGRAPHY.fontSize28};
     line-height: 1.625rem;
     margin-top: ${SPACING.spacing4};
diff --git a/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx b/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx
index a31076bea9d..5cf88679cbf 100644
--- a/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx
+++ b/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx
@@ -66,7 +66,7 @@ const UNSELECTED_OPTIONS_STYLE = css`
     background-color: ${COLORS.grey10}
   }
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     flex-direction: ${DIRECTION_ROW};
     justify-content: ${JUSTIFY_FLEX_START};
     background-color: ${COLORS.blue35};
@@ -92,7 +92,7 @@ const SELECTED_OPTIONS_STYLE = css`
     background-color: ${COLORS.blue30};
   }
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     border-width: 0px;
     background-color: ${COLORS.blue50};
     color: ${COLORS.white};
diff --git a/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx b/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx
index 2ba20ac3ad0..f7c02d0bf25 100644
--- a/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx
+++ b/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx
@@ -44,7 +44,7 @@ const GO_BACK_BUTTON_TEXT_STYLE = css`
     opacity: 70%;
   }
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
     font-size: ${TYPOGRAPHY.fontSize22};
     line-height: ${TYPOGRAPHY.lineHeight28};
diff --git a/app/src/organisms/PipetteWizardFlows/ProbeNotAttached.tsx b/app/src/organisms/PipetteWizardFlows/ProbeNotAttached.tsx
index 0b00e64fad7..249ae534dce 100644
--- a/app/src/organisms/PipetteWizardFlows/ProbeNotAttached.tsx
+++ b/app/src/organisms/PipetteWizardFlows/ProbeNotAttached.tsx
@@ -84,7 +84,7 @@ export const ProbeNotAttached = (
 const ALIGN_BUTTONS = css`
   align-items: ${ALIGN_FLEX_END};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     align-items: ${ALIGN_CENTER};
   }
 `
@@ -97,7 +97,7 @@ const GO_BACK_BUTTON_STYLE = css`
     opacity: 70%;
   }
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
     font-size: ${TYPOGRAPHY.fontSize22};
     padding-left: 0rem;
diff --git a/app/src/organisms/PipetteWizardFlows/Results.tsx b/app/src/organisms/PipetteWizardFlows/Results.tsx
index 4813db7fd5b..be4ec1f8c58 100644
--- a/app/src/organisms/PipetteWizardFlows/Results.tsx
+++ b/app/src/organisms/PipetteWizardFlows/Results.tsx
@@ -261,7 +261,7 @@ export const Results = (props: ResultsProps): JSX.Element => {
         opacity: 70%;
       }
 
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
         font-size: ${TYPOGRAPHY.fontSize22};
 
diff --git a/app/src/organisms/PipetteWizardFlows/constants.ts b/app/src/organisms/PipetteWizardFlows/constants.ts
index e4ddd762d95..275fe26242a 100644
--- a/app/src/organisms/PipetteWizardFlows/constants.ts
+++ b/app/src/organisms/PipetteWizardFlows/constants.ts
@@ -53,7 +53,7 @@ export const NINETY_SIX_CHANNEL_MOUNTING_PLATE = {
 export const BODY_STYLE = css`
   ${TYPOGRAPHY.pRegular};
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-size: 1.275rem;
     line-height: 1.75rem;
   }
diff --git a/app/src/pages/InstrumentDetail/index.tsx b/app/src/pages/InstrumentDetail/index.tsx
index 3f606ba3432..f619bcb9251 100644
--- a/app/src/pages/InstrumentDetail/index.tsx
+++ b/app/src/pages/InstrumentDetail/index.tsx
@@ -96,7 +96,7 @@ const IconButton = styled('button')`
   &:disabled {
     background-color: transparent;
   }
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     cursor: default;
   }
 `
diff --git a/components/src/atoms/Checkbox/index.tsx b/components/src/atoms/Checkbox/index.tsx
index fe6e0707358..990f36b1bd0 100644
--- a/components/src/atoms/Checkbox/index.tsx
+++ b/components/src/atoms/Checkbox/index.tsx
@@ -58,7 +58,7 @@ export function Checkbox(props: CheckboxProps): JSX.Element {
       color: ${COLORS.grey50};
     }
 
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       padding: ${SPACING.spacing20};
       border-radius: ${BORDERS.borderRadius16};
       width: 100%;
@@ -106,7 +106,7 @@ function Check(props: CheckProps): JSX.Element {
 const CHECK_STYLE = css`
   width: 1rem;
   height: 1rem;
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     width: 1.75rem;
     height: 1.75rem;
   }
diff --git a/components/src/atoms/Chip/index.tsx b/components/src/atoms/Chip/index.tsx
index 71e2a1b4510..c4c055998b0 100644
--- a/components/src/atoms/Chip/index.tsx
+++ b/components/src/atoms/Chip/index.tsx
@@ -91,7 +91,7 @@ export function Chip(props: ChipProps): JSX.Element {
   const MEDIUM_CONTAINER_STYLE = css`
     padding: ${SPACING.spacing2} ${background === false ? 0 : SPACING.spacing8};
     grid-gap: ${SPACING.spacing4};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       padding: ${SPACING.spacing8}
         ${background === false ? 0 : SPACING.spacing16};
       grid-gap: ${SPACING.spacing8};
@@ -101,7 +101,7 @@ export function Chip(props: ChipProps): JSX.Element {
   const SMALL_CONTAINER_STYLE = css`
     padding: ${SPACING.spacing4} ${background === false ? 0 : SPACING.spacing6};
     grid-gap: ${SPACING.spacing4};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       padding: ${SPACING.spacing4}
         ${background === false ? 0 : SPACING.spacing8};
       grid-gap: ${SPACING.spacing4};
@@ -111,7 +111,7 @@ export function Chip(props: ChipProps): JSX.Element {
   const ICON_STYLE = css`
     width: ${chipSize === 'medium' ? '1rem' : '0.75rem'};
     height: ${chipSize === 'medium' ? '1rem' : '0.75rem'};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       width: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
       height: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
     }
@@ -119,7 +119,7 @@ export function Chip(props: ChipProps): JSX.Element {
 
   const TEXT_STYLE = css`
     ${chipSize === 'medium' ? WEB_MEDIUM_TEXT_STYLE : WEB_SMALL_TEXT_STYLE}
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       ${chipSize === 'medium'
         ? TYPOGRAPHY.bodyTextSemiBold
         : TYPOGRAPHY.smallBodyTextSemiBold}
diff --git a/components/src/atoms/InputField/index.tsx b/components/src/atoms/InputField/index.tsx
index e0155ffce4c..3593d6edc3a 100644
--- a/components/src/atoms/InputField/index.tsx
+++ b/components/src/atoms/InputField/index.tsx
@@ -87,7 +87,7 @@ export const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
     const [targetProps, tooltipProps] = useHoverTooltip()
 
     const OUTER_CSS = css`
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         grid-gap: ${SPACING.spacing8};
         &:focus-within {
           filter: ${hasError
@@ -150,7 +150,7 @@ export const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
         margin: 0;
       }
 
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         height: ${size === 'small' ? '4.25rem' : '5rem'};
         font-size: ${size === 'small'
           ? TYPOGRAPHY.fontSize28
@@ -187,7 +187,7 @@ export const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
 
     const FORM_BOTTOM_SPACE_STYLE = css`
       padding-top: ${SPACING.spacing4};
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         padding: ${SPACING.spacing8} 0rem;
         padding-bottom: 0;
       }
@@ -197,7 +197,7 @@ export const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
       color: ${hasError ? COLORS.red50 : COLORS.black90};
       padding-bottom: ${SPACING.spacing8};
       text-align: ${textAlign};
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         font-size: ${TYPOGRAPHY.fontSize22};
         font-weight: ${TYPOGRAPHY.fontWeightRegular};
         line-height: ${TYPOGRAPHY.lineHeight28};
@@ -208,7 +208,7 @@ export const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
     const ERROR_TEXT_STYLE = css`
       color: ${COLORS.red50};
       padding-top: ${SPACING.spacing4};
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         font-size: ${TYPOGRAPHY.fontSize22};
         color: ${COLORS.red50};
         padding-top: ${SPACING.spacing8};
@@ -221,7 +221,7 @@ export const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
       font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
       line-height: ${TYPOGRAPHY.lineHeight12};
       text-align: ${TYPOGRAPHY.textAlignRight};
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         color: ${props.disabled ? COLORS.grey40 : COLORS.grey50};
         font-size: ${TYPOGRAPHY.fontSize22};
         font-weight: ${TYPOGRAPHY.fontWeightRegular};
diff --git a/components/src/atoms/ListItem/index.tsx b/components/src/atoms/ListItem/index.tsx
index 8ff88ac0b9d..a41d24eaa29 100644
--- a/components/src/atoms/ListItem/index.tsx
+++ b/components/src/atoms/ListItem/index.tsx
@@ -48,7 +48,7 @@ export function ListItem(props: ListItemProps): JSX.Element {
     padding: 0;
     border-radius: ${BORDERS.borderRadius4};
 
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       padding: ${SPACING.spacing16} ${SPACING.spacing24};
       border-radius: ${BORDERS.borderRadius12};
     }
diff --git a/components/src/atoms/MenuList/MenuItem.tsx b/components/src/atoms/MenuList/MenuItem.tsx
index c42fd087551..09ddc32c2b0 100644
--- a/components/src/atoms/MenuList/MenuItem.tsx
+++ b/components/src/atoms/MenuList/MenuItem.tsx
@@ -25,7 +25,7 @@ export const MenuItem = styled.button<ButtonProps>`
     color: ${COLORS.grey40};
   }
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     align-items: ${ALIGN_CENTER};
     text-align: ${TYPOGRAPHY.textAlignCenter};
     font-size: ${TYPOGRAPHY.fontSize28};
diff --git a/components/src/atoms/StepMeter/index.tsx b/components/src/atoms/StepMeter/index.tsx
index 91f151fb5c9..cb75d15ee2f 100644
--- a/components/src/atoms/StepMeter/index.tsx
+++ b/components/src/atoms/StepMeter/index.tsx
@@ -26,7 +26,7 @@ export const StepMeter = (props: StepMeterProps): JSX.Element => {
     position: ${styleProps.position ? styleProps.position : POSITION_RELATIVE};
     height: ${SPACING.spacing4};
     background-color: ${COLORS.grey30};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       height: ${SPACING.spacing12};
     }
   `
diff --git a/components/src/atoms/StyledText/LegacyStyledText.tsx b/components/src/atoms/StyledText/LegacyStyledText.tsx
index 83df2c69e06..e5a2a3ca0fe 100644
--- a/components/src/atoms/StyledText/LegacyStyledText.tsx
+++ b/components/src/atoms/StyledText/LegacyStyledText.tsx
@@ -12,49 +12,49 @@ export interface LegacyProps extends React.ComponentProps<typeof Text> {
 const styleMap: { [tag: string]: FlattenSimpleInterpolation } = {
   h1: css`
     ${TYPOGRAPHY.h1Default};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       ${TYPOGRAPHY.level1Header};
     }
   `,
   h2: css`
     ${TYPOGRAPHY.h2Regular}
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       ${TYPOGRAPHY.level2HeaderRegular};
     }
   `,
   h3: css`
     ${TYPOGRAPHY.h3Regular}
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       ${TYPOGRAPHY.level3HeaderRegular};
     }
   `,
   h4: css`
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       ${TYPOGRAPHY.level4HeaderRegular};
     }
   `,
   h6: TYPOGRAPHY.h6Default,
   p: css`
     ${TYPOGRAPHY.pRegular}
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       ${TYPOGRAPHY.bodyTextRegular}
     }
   `,
   label: css`
     ${TYPOGRAPHY.labelRegular}
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       ${TYPOGRAPHY.smallBodyTextRegular}
     }
   `,
   h2SemiBold: css`
     ${TYPOGRAPHY.h2SemiBold}
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       ${TYPOGRAPHY.level2HeaderSemiBold}
     }
   `,
   h3SemiBold: css`
     ${TYPOGRAPHY.h3SemiBold}
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       ${TYPOGRAPHY.level3HeaderSemiBold}
     }
   `,
@@ -62,13 +62,13 @@ const styleMap: { [tag: string]: FlattenSimpleInterpolation } = {
   h6SemiBold: TYPOGRAPHY.h6SemiBold,
   pSemiBold: css`
     ${TYPOGRAPHY.pSemiBold}
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       ${TYPOGRAPHY.bodyTextSemiBold}
     }
   `,
   labelSemiBold: css`
     ${TYPOGRAPHY.labelSemiBold}
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       font-size: ${TYPOGRAPHY.fontSize20};
       line-height: ${TYPOGRAPHY.lineHeight24};
     }
diff --git a/components/src/atoms/StyledText/StyledText.tsx b/components/src/atoms/StyledText/StyledText.tsx
index fc33536da9a..b579db2a5d6 100644
--- a/components/src/atoms/StyledText/StyledText.tsx
+++ b/components/src/atoms/StyledText/StyledText.tsx
@@ -149,7 +149,7 @@ const ODDStyleMap = {
   level1Header: {
     as: 'h1',
     style: css`
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         ${TYPOGRAPHY.level1Header};
       }
     `,
@@ -157,7 +157,7 @@ const ODDStyleMap = {
   level2HeaderRegular: {
     as: 'h2',
     style: css`
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         ${TYPOGRAPHY.level2HeaderRegular};
       }
     `,
@@ -165,7 +165,7 @@ const ODDStyleMap = {
   level2HeaderSemiBold: {
     as: 'h2',
     style: css`
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         ${TYPOGRAPHY.level2HeaderSemiBold}
       }
     `,
@@ -173,7 +173,7 @@ const ODDStyleMap = {
   level2HeaderBold: {
     as: 'h2',
     style: css`
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         ${TYPOGRAPHY.level2HeaderBold}
       }
     `,
@@ -182,7 +182,7 @@ const ODDStyleMap = {
   level3HeaderRegular: {
     as: 'h3',
     style: css`
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         ${TYPOGRAPHY.level3HeaderRegular};
       }
     `,
@@ -190,7 +190,7 @@ const ODDStyleMap = {
   level3HeaderSemiBold: {
     as: 'h3',
     style: css`
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         ${TYPOGRAPHY.level3HeaderSemiBold}
       }
     `,
@@ -198,7 +198,7 @@ const ODDStyleMap = {
   level3HeaderBold: {
     as: 'h3',
     style: css`
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         ${TYPOGRAPHY.level3HeaderBold}
       }
     `,
@@ -207,7 +207,7 @@ const ODDStyleMap = {
   level4HeaderRegular: {
     as: 'h4',
     style: css`
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         ${TYPOGRAPHY.level4HeaderRegular};
       }
     `,
@@ -215,7 +215,7 @@ const ODDStyleMap = {
   level4HeaderSemiBold: {
     as: 'h4',
     style: css`
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         ${TYPOGRAPHY.level4HeaderSemiBold}
       }
     `,
@@ -223,7 +223,7 @@ const ODDStyleMap = {
   level4HeaderBold: {
     as: 'h4',
     style: css`
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         ${TYPOGRAPHY.level4HeaderBold}
       }
     `,
@@ -232,7 +232,7 @@ const ODDStyleMap = {
   bodyTextRegular: {
     as: 'p',
     style: css`
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         ${TYPOGRAPHY.bodyTextRegular}
       }
     `,
@@ -240,7 +240,7 @@ const ODDStyleMap = {
   bodyTextSemiBold: {
     as: 'p',
     style: css`
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         ${TYPOGRAPHY.bodyTextSemiBold}
       }
     `,
@@ -248,7 +248,7 @@ const ODDStyleMap = {
   bodyTextBold: {
     as: 'p',
     style: css`
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         ${TYPOGRAPHY.bodyTextBold}
       }
     `,
@@ -256,7 +256,7 @@ const ODDStyleMap = {
   smallBodyTextRegular: {
     as: 'label',
     style: css`
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         ${TYPOGRAPHY.smallBodyTextRegular}
       }
     `,
@@ -265,7 +265,7 @@ const ODDStyleMap = {
   smallBodyTextSemiBold: {
     as: 'label',
     style: css`
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         font-size: ${TYPOGRAPHY.fontSize20};
         line-height: ${TYPOGRAPHY.lineHeight24};
       }
@@ -275,7 +275,7 @@ const ODDStyleMap = {
   smallBodyTextBold: {
     as: 'label',
     style: css`
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         ${TYPOGRAPHY.smallBodyTextBold}
       }
     `,
@@ -283,7 +283,7 @@ const ODDStyleMap = {
   hidden: {
     as: 'none',
     style: css`
-      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         display: none;
       }
     `,
diff --git a/components/src/atoms/Tag/index.tsx b/components/src/atoms/Tag/index.tsx
index e3cd620c17b..0cc2aad10fe 100644
--- a/components/src/atoms/Tag/index.tsx
+++ b/components/src/atoms/Tag/index.tsx
@@ -48,7 +48,7 @@ export function Tag(props: TagProps): JSX.Element {
   const DEFAULT_CONTAINER_STYLE = css`
     padding: ${SPACING.spacing2} ${SPACING.spacing8};
     border-radius: ${BORDERS.borderRadius4};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       border-radius: ${BORDERS.borderRadius8};
       padding: ${SPACING.spacing8} ${SPACING.spacing12};
     }
@@ -68,7 +68,7 @@ export function Tag(props: TagProps): JSX.Element {
   const ICON_STYLE = css`
     width: 0.75rem;
     height: 0.875rem;
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       width: 1.5rem;
       height: 1.5rem;
     }
@@ -76,7 +76,7 @@ export function Tag(props: TagProps): JSX.Element {
 
   const TEXT_STYLE = css`
     ${TYPOGRAPHY.h3Regular}
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       ${TYPOGRAPHY.bodyTextRegular}
     }
   `
diff --git a/components/src/atoms/buttons/LargeButton.tsx b/components/src/atoms/buttons/LargeButton.tsx
index 64a46888ee8..b598c985033 100644
--- a/components/src/atoms/buttons/LargeButton.tsx
+++ b/components/src/atoms/buttons/LargeButton.tsx
@@ -154,7 +154,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
         .disabledBackgroundColor};
     }
 
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       cursor: default;
       align-items: ${ALIGN_FLEX_START};
       flex-direction: ${DIRECTION_COLUMN};
@@ -205,7 +205,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
         css={css`
           font-size: ${fontSizeBodyLargeSemiBold};
           padding-right: ${iconName != null ? SPACING.spacing8 : '0'};
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
             ${TYPOGRAPHY.level3HeaderSemiBold}
           }
         `}
@@ -217,7 +217,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
           css={css`
             width: 1.5rem;
             height: 1.5rem;
-            @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+            body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
               width: 5rem;
               height: 5rem;
             }
diff --git a/components/src/atoms/buttons/RadioButton.tsx b/components/src/atoms/buttons/RadioButton.tsx
index 7a7c2f129e7..5bfa3006d60 100644
--- a/components/src/atoms/buttons/RadioButton.tsx
+++ b/components/src/atoms/buttons/RadioButton.tsx
@@ -79,7 +79,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
       ${isSelected ? SELECTED_BUTTON_STYLE : AVAILABLE_BUTTON_STYLE}
       ${disabled && DISABLED_BUTTON_STYLE}
 
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
         cursor: default;
         padding: ${isLarge ? SPACING.spacing24 : SPACING.spacing20};
         border-radius: ${BORDERS.borderRadius16};
@@ -91,7 +91,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
     <Flex
       css={css`
         width: auto;
-        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
           width: 100%;
         }
       `}
diff --git a/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx
index 7904d45b271..bcb069bd02b 100644
--- a/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx
+++ b/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx
@@ -103,7 +103,7 @@ const EMPTY_CONFIG_STYLE = css`
   border-radius: ${BORDERS.borderRadius4};
   width: 100%;
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     background-color: ${COLORS.blue35};
   }
 
@@ -125,7 +125,7 @@ const EMPTY_CONFIG_STYLE = css`
     border: 3px solid ${COLORS.blue50};
     background-color: ${COLORS.blue35};
 
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       background-color: ${COLORS.blue40};
     }
   }
diff --git a/components/src/hardware-sim/DeckConfigurator/constants.ts b/components/src/hardware-sim/DeckConfigurator/constants.ts
index c5fab54ab26..3866a797d89 100644
--- a/components/src/hardware-sim/DeckConfigurator/constants.ts
+++ b/components/src/hardware-sim/DeckConfigurator/constants.ts
@@ -34,7 +34,7 @@ export const CONFIG_STYLE_READ_ONLY = css`
   grid-gap: ${SPACING.spacing8};
   justify-content: ${JUSTIFY_CENTER};
   width: 100%;
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     background-color: ${COLORS.grey55};
   }
 `
@@ -53,7 +53,7 @@ export const CONFIG_STYLE_EDITABLE = css`
   &:focus-visible {
     border: 3px solid ${COLORS.yellow50};
     background-color: ${COLORS.grey55};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       background-color: ${COLORS.grey60};
     }
   }
@@ -74,7 +74,7 @@ export const CONFIG_STYLE_SELECTED = css`
   &:focus-visible {
     border: 3px solid ${COLORS.yellow50};
     background-color: ${COLORS.blue55};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
       background-color: ${COLORS.blue60};
     }
   }
diff --git a/components/src/modals/ModalShell.tsx b/components/src/modals/ModalShell.tsx
index a1a10035be5..a46b36cb306 100644
--- a/components/src/modals/ModalShell.tsx
+++ b/components/src/modals/ModalShell.tsx
@@ -110,7 +110,7 @@ const ModalArea = styled.div<
   box-shadow: ${BORDERS.smallDropShadow};
   height: ${({ isFullPage }) => (isFullPage ? '100%' : 'auto')};
   background-color: ${COLORS.white};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     border-radius: ${BORDERS.borderRadius16};
   }
   ${styleProps};
diff --git a/components/src/molecules/DeckInfoLabel/index.tsx b/components/src/molecules/DeckInfoLabel/index.tsx
index 3888029a55b..1c230c524da 100644
--- a/components/src/molecules/DeckInfoLabel/index.tsx
+++ b/components/src/molecules/DeckInfoLabel/index.tsx
@@ -47,7 +47,7 @@ export const DeckInfoLabel = styled(DeckInfoLabelComponent)`
     width: ${props => props.svgSize ?? '0.875rem'};
   }
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     border-radius: ${BORDERS.borderRadius12};
     height: ${props => props.height ?? SPACING.spacing32};
     padding: ${SPACING.spacing4}
diff --git a/components/src/molecules/Tabs/index.tsx b/components/src/molecules/Tabs/index.tsx
index 6755d74f2e6..1b63fe0ab2e 100644
--- a/components/src/molecules/Tabs/index.tsx
+++ b/components/src/molecules/Tabs/index.tsx
@@ -30,7 +30,7 @@ const DEFAULT_TAB_STYLE = css`
     }
   }
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     border-radius: ${BORDERS.borderRadius16};
     box-shadow: none;
     font-size: ${TYPOGRAPHY.fontSize22};
@@ -56,7 +56,7 @@ const CURRENT_TAB_STYLE = css`
 `
 const DEFAULT_CONTAINER_STYLE = css`
   grid-gap: ${SPACING.spacing4};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     grid-gap: ${SPACING.spacing8};
   }
 `
diff --git a/components/src/primitives/Btn.tsx b/components/src/primitives/Btn.tsx
index 5ea917a3a29..2908d8ee713 100644
--- a/components/src/primitives/Btn.tsx
+++ b/components/src/primitives/Btn.tsx
@@ -24,7 +24,7 @@ const BUTTON_BASE_STYLE = css`
     cursor: default;
   }
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     cursor: default;
   }
 `
diff --git a/components/src/primitives/style-props.ts b/components/src/primitives/style-props.ts
index b7de00e2513..bfd4ac58895 100644
--- a/components/src/primitives/style-props.ts
+++ b/components/src/primitives/style-props.ts
@@ -181,15 +181,19 @@ const transitionStyles = (props: Types.StyleProps): CSSObject => {
 }
 
 export const styleProps = (props: Types.StyleProps): CSSObject => ({
-  ...colorStyles(props),
-  ...typographyStyles(props),
-  ...spacingStyles(props),
-  ...borderStyles(props),
-  ...flexboxStyles(props),
-  ...gridStyles(props),
-  ...layoutStyles(props),
-  ...positionStyles(props),
-  ...transitionStyles(props),
+  // the ampersands are to increase CSS specificity of inline applied styles
+  // see https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity
+  '&&&': {
+    ...colorStyles(props),
+    ...typographyStyles(props),
+    ...spacingStyles(props),
+    ...borderStyles(props),
+    ...flexboxStyles(props),
+    ...gridStyles(props),
+    ...layoutStyles(props),
+    ...positionStyles(props),
+    ...transitionStyles(props),
+  },
 })
 
 export const isntStyleProp = (prop: string | React.ReactText): boolean =>
diff --git a/components/src/ui-style-constants/responsiveness.ts b/components/src/ui-style-constants/responsiveness.ts
index d1036d460ed..d74bdb1ea11 100644
--- a/components/src/ui-style-constants/responsiveness.ts
+++ b/components/src/ui-style-constants/responsiveness.ts
@@ -5,6 +5,8 @@
 // is precisely 600x1024
 export const touchscreenMediaQuerySpecs = '(height: 600px) and (width: 1024px)'
 
+export const TOUCH_ODD_CLASS = 'touch-odd' as const
+
 // This needs to be recalculated on-render to work with storybook viewport settings, so
 // if you need to support both media types in js use the function
 export const isTouchscreenDynamic = (): boolean =>
diff --git a/protocol-designer/src/components/modals/CreateFileWizard/RobotTypeTile.tsx b/protocol-designer/src/components/modals/CreateFileWizard/RobotTypeTile.tsx
index 7f551da919c..5f36ab9048f 100644
--- a/protocol-designer/src/components/modals/CreateFileWizard/RobotTypeTile.tsx
+++ b/protocol-designer/src/components/modals/CreateFileWizard/RobotTypeTile.tsx
@@ -147,7 +147,7 @@ const UNSELECTED_OPTIONS_STYLE = css`
     border: 1px solid ${COLORS.grey60};
   }
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     flex-direction: ${DIRECTION_ROW};
     justify-content: ${JUSTIFY_FLEX_START};
     background-color: ${COLORS.blue35};
@@ -172,7 +172,7 @@ const SELECTED_OPTIONS_STYLE = css`
     background-color: ${COLORS.blue10};
   }
 
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     border-width: 0px;
     background-color: ${COLORS.blue50};
     color: ${COLORS.white};
diff --git a/protocol-designer/src/components/modals/CreateFileWizard/WizardHeader.tsx b/protocol-designer/src/components/modals/CreateFileWizard/WizardHeader.tsx
index a000c204ca6..5ae4a5cc24b 100644
--- a/protocol-designer/src/components/modals/CreateFileWizard/WizardHeader.tsx
+++ b/protocol-designer/src/components/modals/CreateFileWizard/WizardHeader.tsx
@@ -31,7 +31,7 @@ const EXIT_BUTTON_STYLE = css`
   &:hover {
     opacity: 70%;
   }
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     margin-right: 1.75rem;
     font-size: ${TYPOGRAPHY.fontSize22};
     font-weight: ${TYPOGRAPHY.fontWeightBold};
@@ -41,13 +41,13 @@ const HEADER_CONTAINER_STYLE = css`
   flex-direction: ${DIRECTION_ROW};
   justify-content: ${JUSTIFY_SPACE_BETWEEN};
   padding: ${SPACING.spacing16} ${SPACING.spacing32};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     padding: 1.75rem ${SPACING.spacing32};
   }
 `
 const HEADER_TEXT_STYLE = css`
   ${TYPOGRAPHY.pSemiBold}
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-size: ${TYPOGRAPHY.fontSize22};
     font-weight: ${TYPOGRAPHY.fontWeightBold};
     line-height: ${TYPOGRAPHY.lineHeight28};
@@ -55,7 +55,7 @@ const HEADER_TEXT_STYLE = css`
 `
 const STEP_TEXT_STYLE = css`
   ${TYPOGRAPHY.pSemiBold}
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+  body.${RESPONSIVENESS.TOUCH_ODD_CLASS} & {
     font-size: 1.375rem;
     font-weight: 700;
     margin-left: ${SPACING.spacing16};