diff --git a/docs/fixed-responsive.mdx b/docs/fixed-responsive.mdx
new file mode 100644
index 0000000..901d78d
--- /dev/null
+++ b/docs/fixed-responsive.mdx
@@ -0,0 +1,37 @@
+---
+title: Responsive Visualizations
+description: Make your visualization responsive to the screen size
+---
+
+Gosling visualizations can be responsive or fixed to the screen size.
+
+## Responsive size
+A Gosling visualization can be made responsive to the screen size by setting the `responsiveSize` property in the root of the Gosling specification. When the screen size changes, the visualization will automatically adjust its size to fit the screen.
+
+Here is an example of a Gosling specification with responsive size enabled:
+
+```javascript
+{
+  // highlight-start
+  responsiveSize: { width: true },
+  // highlight-end
+  // ... rest of the Gosling spec
+}
+```
+
+## Fixed size
+
+A Gosling visualization can have a fixed size by setting the `width` and `height` properties. The tracks will have a fixed size regardless of the screen size.
+
+When the `width` and `height` properties are set in the root of the spec, all tracks will have this height and width unless they are overridden in the track specification.
+
+```javascript
+{
+  // highlight-start
+  width: 800,
+  height: 200,
+  // highlight-end
+  // ... rest of the Gosling spec
+}
+```
+
diff --git a/sidebarDocs.js b/sidebarDocs.js
index 8c0ec87..a2dba5d 100644
--- a/sidebarDocs.js
+++ b/sidebarDocs.js
@@ -27,6 +27,7 @@ module.exports = {
         'genome-builds',
         'user-interaction',
         'semantic-zoom',
+        'fixed-responsive',
       ],
     },
     {