diff --git a/.changeset/dull-jobs-leave.md b/.changeset/dull-jobs-leave.md
new file mode 100644
index 000000000..09f575a74
--- /dev/null
+++ b/.changeset/dull-jobs-leave.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-layout": patch
+---
+
+Handle custom media layout specs.
diff --git a/packages/wonder-blocks-layout/src/components/media-layout.tsx b/packages/wonder-blocks-layout/src/components/media-layout.tsx
index 3cdf741be..2283544a3 100644
--- a/packages/wonder-blocks-layout/src/components/media-layout.tsx
+++ b/packages/wonder-blocks-layout/src/components/media-layout.tsx
@@ -11,12 +11,6 @@ import {
     MEDIA_MODAL_SPEC,
 } from "../util/specs";
 
-const queries = [
-    ...Object.values(MEDIA_DEFAULT_SPEC).map((spec: any) => spec.query),
-    ...Object.values(MEDIA_INTERNAL_SPEC).map((spec: any) => spec.query),
-    ...Object.values(MEDIA_MODAL_SPEC).map((spec: any) => spec.query),
-];
-
 const mediaQueryLists: {
     [key: string]: MediaQueryList;
 } = {};
@@ -213,6 +207,15 @@ class MediaLayoutInternal extends React.Component<CombinedProps, State> {
     render(): React.ReactNode {
         const {children, mediaSpec, ssrSize, overrideSize} = this.props;
 
+        const queries = [
+            ...Object.values(MEDIA_DEFAULT_SPEC).map((spec: any) => spec.query),
+            ...Object.values(MEDIA_INTERNAL_SPEC).map(
+                (spec: any) => spec.query,
+            ),
+            ...Object.values(MEDIA_MODAL_SPEC).map((spec: any) => spec.query),
+            ...Object.values(mediaSpec).map((spec: any) => spec.query),
+        ];
+
         // We need to create the MediaQueryLists during the first render in order
         // to query whether any of them match.
         if (!this.isServerSide()) {