diff --git a/docs/docs/guides/CAPTURING.mdx b/docs/docs/guides/CAPTURING.mdx
index 439e342..b59fa08 100644
--- a/docs/docs/guides/CAPTURING.mdx
+++ b/docs/docs/guides/CAPTURING.mdx
@@ -6,9 +6,9 @@ sidebar_label: Taking Photos/Recording Videos
 
 import useBaseUrl from '@docusaurus/useBaseUrl'
 
-<div>
-  <svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
-    <image href={useBaseUrl("img/demo_capture.gif")} x="18" y="33" width="247" height="469"  />
+<div class="image-container">
+  <svg xmlns="http://www.w3.org/2000/svg" width="283" height="535">
+    <image href={useBaseUrl("img/demo_capture.gif")} x="18" y="33" width="247" height="469" />
     <image href={useBaseUrl("img/frame.png")} width="283" height="535" />
   </svg>
 </div>
diff --git a/docs/docs/guides/DEVICES.mdx b/docs/docs/guides/DEVICES.mdx
index f10ba4c..f0e1774 100644
--- a/docs/docs/guides/DEVICES.mdx
+++ b/docs/docs/guides/DEVICES.mdx
@@ -8,9 +8,9 @@ import Tabs from '@theme/Tabs'
 import TabItem from '@theme/TabItem'
 import useBaseUrl from '@docusaurus/useBaseUrl'
 
-<div>
-  <svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
-    <image href={useBaseUrl("img/demo.gif")} x="18" y="33" width="247" height="469"  />
+<div class="image-container">
+  <svg xmlns="http://www.w3.org/2000/svg" width="283" height="535">
+    <image href={useBaseUrl("img/demo.gif")} x="18" y="33" width="247" height="469" />
     <image href={useBaseUrl("img/frame.png")} width="283" height="535" />
   </svg>
 </div>
diff --git a/docs/docs/guides/ERRORS.mdx b/docs/docs/guides/ERRORS.mdx
index 252d387..5cd33cc 100644
--- a/docs/docs/guides/ERRORS.mdx
+++ b/docs/docs/guides/ERRORS.mdx
@@ -6,8 +6,8 @@ sidebar_label: Camera Errors
 
 import useBaseUrl from '@docusaurus/useBaseUrl'
 
-<div>
-  <img align="right" width="283" src={useBaseUrl("img/example_error.png")} />
+<div class="image-container">
+  <img width="283" src={useBaseUrl("img/example_error.png")} />
 </div>
 
 ## Why?
diff --git a/docs/docs/guides/FORMATS.mdx b/docs/docs/guides/FORMATS.mdx
index fda2c07..9c1d430 100644
--- a/docs/docs/guides/FORMATS.mdx
+++ b/docs/docs/guides/FORMATS.mdx
@@ -8,8 +8,8 @@ import Tabs from '@theme/Tabs'
 import TabItem from '@theme/TabItem'
 import useBaseUrl from '@docusaurus/useBaseUrl'
 
-<div>
-  <img align="right" width="283" src={useBaseUrl("img/example.png")} />
+<div class="image-container">
+  <img width="283" src={useBaseUrl("img/example.png")} />
 </div>
 
 ## What are camera formats?
diff --git a/docs/docs/guides/FRAME_PROCESSORS.mdx b/docs/docs/guides/FRAME_PROCESSORS.mdx
index 2d31f8f..d57ce8e 100644
--- a/docs/docs/guides/FRAME_PROCESSORS.mdx
+++ b/docs/docs/guides/FRAME_PROCESSORS.mdx
@@ -8,9 +8,9 @@ import Tabs from '@theme/Tabs'
 import TabItem from '@theme/TabItem'
 import useBaseUrl from '@docusaurus/useBaseUrl'
 
-<div>
-  <svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
-    <image href={useBaseUrl("img/frame-processors.gif")} x="18" y="33" width="247" height="469"  />
+<div class="image-container">
+  <svg xmlns="http://www.w3.org/2000/svg" width="283" height="535">
+    <image href={useBaseUrl("img/frame-processors.gif")} x="18" y="33" width="247" height="469" />
     <image href={useBaseUrl("img/frame.png")} width="283" height="535" />
   </svg>
 </div>
diff --git a/docs/docs/guides/FRAME_PROCESSORS_SKIA.mdx b/docs/docs/guides/FRAME_PROCESSORS_SKIA.mdx
index 433adcc..54adfe6 100644
--- a/docs/docs/guides/FRAME_PROCESSORS_SKIA.mdx
+++ b/docs/docs/guides/FRAME_PROCESSORS_SKIA.mdx
@@ -8,9 +8,9 @@ import Tabs from '@theme/Tabs'
 import TabItem from '@theme/TabItem'
 import useBaseUrl from '@docusaurus/useBaseUrl'
 
-<div>
-  <svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
-    <image href={useBaseUrl("img/demo_drawing.mp4")} x="18" y="33" width="247" height="469"  />
+<div class="image-container">
+  <svg xmlns="http://www.w3.org/2000/svg" width="283" height="535">
+    <image href={useBaseUrl("img/demo_drawing.mp4")} x="18" y="33" width="247" height="469" />
     <image href={useBaseUrl("img/frame.png")} width="283" height="535" />
   </svg>
 </div>
diff --git a/docs/docs/guides/LIFECYCLE.mdx b/docs/docs/guides/LIFECYCLE.mdx
index 020f71f..a550fe6 100644
--- a/docs/docs/guides/LIFECYCLE.mdx
+++ b/docs/docs/guides/LIFECYCLE.mdx
@@ -6,8 +6,8 @@ sidebar_label: Lifecycle
 
 import useBaseUrl from '@docusaurus/useBaseUrl'
 
-<div>
-  <img align="right" width="283" src={useBaseUrl("img/example.png")} />
+<div class="image-container">
+  <img width="283" src={useBaseUrl("img/example.png")} />
 </div>
 
 ## The `isActive` prop
diff --git a/docs/docs/guides/MOCKING.mdx b/docs/docs/guides/MOCKING.mdx
index 0e38824..063f901 100644
--- a/docs/docs/guides/MOCKING.mdx
+++ b/docs/docs/guides/MOCKING.mdx
@@ -6,8 +6,8 @@ sidebar_label: Mocking
 
 import useBaseUrl from '@docusaurus/useBaseUrl'
 
-<div>
-  <img align="right" width="283" src={useBaseUrl("img/11_back.png")} />
+<div class="image-container">
+  <img width="283" src={useBaseUrl("img/11_back.png")} />
 </div>
 
 ## Mocking VisionCamera
diff --git a/docs/docs/guides/SETUP.mdx b/docs/docs/guides/SETUP.mdx
index 1f764b0..be0c7fb 100644
--- a/docs/docs/guides/SETUP.mdx
+++ b/docs/docs/guides/SETUP.mdx
@@ -9,8 +9,8 @@ import Tabs from '@theme/Tabs'
 import TabItem from '@theme/TabItem'
 import useBaseUrl from '@docusaurus/useBaseUrl'
 
-<div>
-  <img align="right" width="283" src={useBaseUrl("img/example_intro.png")} />
+<div class="image-container">
+  <img width="283" src={useBaseUrl("img/example_intro.png")} />
 </div>
 
 ## Installing the library
diff --git a/docs/docs/guides/TROUBLESHOOTING.mdx b/docs/docs/guides/TROUBLESHOOTING.mdx
index d92de04..ffd175d 100644
--- a/docs/docs/guides/TROUBLESHOOTING.mdx
+++ b/docs/docs/guides/TROUBLESHOOTING.mdx
@@ -8,8 +8,8 @@ import Tabs from '@theme/Tabs'
 import TabItem from '@theme/TabItem'
 import useBaseUrl from '@docusaurus/useBaseUrl'
 
-<div>
-  <img align="right" width="283" src={useBaseUrl("img/11_back.png")} />
+<div class="image-container">
+  <img width="283" src={useBaseUrl("img/11_back.png")} />
 </div>
 
 ## Steps to try
diff --git a/docs/docs/guides/ZOOMING.mdx b/docs/docs/guides/ZOOMING.mdx
index 948d0c2..0f0bcbc 100644
--- a/docs/docs/guides/ZOOMING.mdx
+++ b/docs/docs/guides/ZOOMING.mdx
@@ -6,9 +6,9 @@ sidebar_label: Zooming
 
 import useBaseUrl from '@docusaurus/useBaseUrl'
 
-<div>
-  <svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
-    <image href={useBaseUrl("img/demo.gif")} x="18" y="33" width="247" height="469"  />
+<div class="image-container">
+  <svg xmlns="http://www.w3.org/2000/svg" width="283" height="535">
+    <image href={useBaseUrl("img/demo.gif")} x="18" y="33" width="247" height="469" />
     <image href={useBaseUrl("img/frame.png")} width="283" height="535" />
   </svg>
 </div>
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 4974970..4108207 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -19,7 +19,35 @@
 
 .docusaurus-highlight-code-line {
   background-color: rgb(72, 77, 91);
-  display: block;
+  display: flex;
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
 }
+
+/* align image to the right */
+.image-container {
+  float: right;
+}
+
+/* mobile screen; align center */
+@media (max-width: 600px) {
+  .image-container {
+      float: none;
+      text-align: center;
+  }
+}
+
+/* wider screen; align right again */
+@media (min-width: 600px) and (max-width: 997px) {
+  .image-container {
+    float: right;
+  }
+}
+
+/* even wider screen but with sidebars; align center cuz we dont have enough space for right */
+@media (min-width: 997px) and (max-width: 1145px) {
+  .image-container {
+    float: none;
+    text-align: center;
+  }
+}