diff --git a/docs/docs/guides/DEVICES.mdx b/docs/docs/guides/DEVICES.mdx
index f0e1774..a7ddd95 100644
--- a/docs/docs/guides/DEVICES.mdx
+++ b/docs/docs/guides/DEVICES.mdx
@@ -159,7 +159,7 @@ const device = getCameraDevice(devices, 'back', {
This will try to find a [`CameraDevice`](/docs/api/interfaces/CameraDevice) that consists of all three physical Camera Devices, or the next best match (e.g. "Dual-Camera", or just a single wide-angle-camera) if not found. With the "Triple-Camera", we can now zoom out to a wider field of view:
-
+
If you want to do the filtering/sorting fully yourself, you can also just get all devices, then implement your own filter:
diff --git a/docs/docs/guides/HDR.mdx b/docs/docs/guides/HDR.mdx
index a2c0c37..2e93222 100644
--- a/docs/docs/guides/HDR.mdx
+++ b/docs/docs/guides/HDR.mdx
@@ -13,8 +13,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl'
HDR ("High Dynamic Range") is a capture mode that captures colors in a much wider range, allowing for much better details and brighter colors.
### Photo HDR
@@ -22,7 +22,7 @@ HDR ("High Dynamic Range") is a capture mode that captures colors in a much wide
Photo HDR is accomplished by running three captures instead of one, an underexposed photo, a normal photo, and an overexposed photo. Then, these images are fused together to create darker darks and brighter brights.
-
+
### Video HDR
diff --git a/docs/docs/guides/STABILIZATION.mdx b/docs/docs/guides/STABILIZATION.mdx
index 2db6b9a..812fcb5 100644
--- a/docs/docs/guides/STABILIZATION.mdx
+++ b/docs/docs/guides/STABILIZATION.mdx
@@ -13,7 +13,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl'
Video Stabilization is an algorithm that stabilizes the recorded video to smoothen any jitters, shaking, or abrupt movements from the user's camera movement.
-
+
There are multiple different approaches to Video Stabilization, either software- or hardware-based. Video Stabilization always crops the image to a smaller view area so it has room to shift the image around, so expect a "zoomed-in" effect. Also, since Video Stabilization is a complex algorithm, enabling it will increase the time the Camera takes to initialize.
diff --git a/docs/docs/guides/ZOOMING.mdx b/docs/docs/guides/ZOOMING.mdx
index 0f0bcbc..7a376d6 100644
--- a/docs/docs/guides/ZOOMING.mdx
+++ b/docs/docs/guides/ZOOMING.mdx
@@ -30,7 +30,7 @@ A Camera device has different minimum, maximum and neutral zoom values. Those va
* The `neutralZoom` value is often `1`, but can be larger than `1` for devices with "fish-eye" (ultra-wide-angle) cameras. In those cases, the user expects to be at whatever zoom value `neutralZoom` is (e.g. `2`) per default, and if he tries to zoom out even more, he goes to `minZoom` (`1`), which switches over to the "fish-eye" (ultra-wide-angle) camera as seen in this GIF:
-
+
The Camera's `zoom` property expects values to be in the same "factor" scale as the `minZoom`, `neutralZoom` and `maxZoom` values - so if you pass `zoom={device.minZoom}` it is at the minimum available zoom, where as if you pass `zoom={device.maxZoom}` the maximum zoom value possible is zoomed in. It is recommended that you start at `device.neutralZoom` and let the user manually zoom out to the fish-eye camera on demand (if available).
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 119069b..2ea11b3 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -19,15 +19,35 @@
--docusaurus-highlighted-code-line-bg: rgb(61, 63, 67);
}
-img {
+/* Images inside the docs that are centered/inside text */
+.doc-image {
border-radius: 15px;
+ max-width: 55%;
+ max-height: 30vh;
+}
+@media (max-width: 600px) {
+ .doc-image {
+ max-width: 80%;
+ max-height: 50vh;
+ }
+}
+@media (min-width: 600px) and (max-width: 997px) {
+ .doc-image {
+ max-width: 55%;
+ max-height: 50vh;
+ }
+}
+@media (min-width: 997px) and (max-width: 1145px) {
+ .doc-image {
+ max-width: 80%;
+ max-height: 30vh;
+ }
}
/* align image to the right */
.image-container {
float: right;
}
-
/* mobile screen; align center */
@media (max-width: 600px) {
.image-container {
@@ -35,14 +55,12 @@ img {
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 {