diff --git a/docs/layout.md b/docs/layout.md
index 686b2f29f..266dc3bc3 100644
--- a/docs/layout.md
+++ b/docs/layout.md
@@ -13,8 +13,8 @@ export interface FullPageLayout {
   beforeBody: QuartzComponent[] // laid out vertically
   pageBody: QuartzComponent // single component
   afterBody: QuartzComponent[] // laid out vertically
-  left: QuartzComponent[] // vertical on desktop, horizontal on mobile
-  right: QuartzComponent[] // vertical on desktop, horizontal on mobile
+  left: QuartzComponent[] // vertical on desktop and tablet, horizontal on mobile
+  right: QuartzComponent[] // vertical on desktop, horizontal on tablet and mobile
   footer: QuartzComponent // single component
 }
 ```
@@ -33,6 +33,23 @@ Quartz **components**, like plugins, can take in additional properties as config
 
 See [a list of all the components](component.md) for all available components along with their configuration options. You can also checkout the guide on [[creating components]] if you're interested in further customizing the behaviour of Quartz.
 
+### Layout breakpoints
+
+Quartz has different layouts depending on the width the screen viewing the website.
+
+The breakpoints for layouts can be configured in `variables.scss`.
+
+ - `mobile`: screen width below this size will use mobile layout.
+ - `desktop`: screen width above this size will use desktop layout.
+ - Screen width between `mobile` and `desktop` width will use the tablet layout.
+
+```scss
+$breakpoints: (
+  mobile: 750px,
+  desktop: 1500px,
+);
+```
+
 ### Style
 
 Most meaningful style changes like colour scheme and font can be done simply through the [[configuration#General Configuration|general configuration]] options. However, if you'd like to make more involved style changes, you can do this by writing your own styles. Quartz 4, like Quartz 3, uses [Sass](https://sass-lang.com/guide/) for styling.
diff --git a/quartz/styles/variables.scss b/quartz/styles/variables.scss
index 338e8d5ee..143eed389 100644
--- a/quartz/styles/variables.scss
+++ b/quartz/styles/variables.scss
@@ -1,21 +1,20 @@
 /**
  * Layout breakpoints
  * $mobile: screen width below this value will use mobile styles
- * $tablet: screen width below this value will use tablet styles
- * $desktop: screen width below this value will use desktop styles
- * assuming mobile < tablet < desktop
+ * $desktop: screen width above this value will use desktop styles
+ * Screen width between $mobile and $desktop width will use the tablet layout.
+ * assuming mobile < desktop
  */
 $breakpoints: (
   mobile: 750px,
-  tablet: 1000px,
   desktop: 1500px,
 );
 
 $mobile: "(max-width: #{map-get($breakpoints, mobile)})";
-$tablet: "(max-width: #{map-get($breakpoints, tablet)})";
+$tablet: "(min-width: #{map-get($breakpoints, mobile)}) and (max-width: #{map-get($breakpoints, desktop)})";
 $desktop: "(max-width: #{map-get($breakpoints, desktop)})";
 
-$pageWidth: 750px;
+$pageWidth: #{map-get($breakpoints, mobile)};
 $sidePanelWidth: 380px;
 $topSpacing: 6rem;
 $boldWeight: 700;