fix: improve blog design on smaller screens (#2774)

On smaller screens the video and text may overflow outside of the screen. To handle this add some breakpoints to contain those elements in. --------- Co-authored-by: Michael Marszalek <[email protected]>
digdir · Nov 13, 2024 · 918af79 · 918af79
1 parent 6c59fc5
commit 918af79
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/apps/storefront/components/MdxContent/MdxContent.module.css b/apps/storefront/components/MdxContent/MdxContent.module.css
@@ -181,3 +181,17 @@
     }
   }
 }
+
+@media screen and (max-width: 740px) {
+  .content {
+    margin-left: inherit;
+    margin-right: inherit;
+  }
+}
+@media screen and (max-width: 860px) {
+  .content video,
+  .content [data-iframe-video] {
+    width: auto;
+    margin-left: initial !important;
+  }
+}