diff --git a/docs/api/modal.md b/docs/api/modal.md
index 4f35073dade..3229fea14da 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -98,10 +98,8 @@ Here's a simplified example illustrating how a child component can interact with
import CanDismissChildStateExample from '@site/static/usage/v8/modal/can-dismiss/child-state/index.md';
-
-## Types of modals
-### Card Modal
+## Card Modal
Developers can create a card modal effect where the modal appears as a card stacked on top of your app's main content. To create a card modal, developers need to set the `presentingElement` property on `ion-modal`.
@@ -117,10 +115,10 @@ import CardExample from '@site/static/usage/v8/modal/card/basic/index.md';
-### Sheet Modal
+## Sheet Modal
:::info
-[Content](./content) must be used inside of the sheet modal otherwise your modal content will not be scrollable.
+[Content](./content) should be used inside of the sheet modal if you want your modal content to be scrollable.
:::
Developers can create a sheet modal effect similar to the drawer components available in maps applications. To create a sheet modal, developers need to set the `breakpoints` and `initialBreakpoint` properties on `ion-modal`.
@@ -135,19 +133,23 @@ import SheetExample from '@site/static/usage/v8/modal/sheet/basic/index.md';
-#### Interacting with background content
+### Interacting with background content
import SheetBackgroundContentExample from '@site/static/usage/v8/modal/sheet/background-content/index.md';
-#### Auto Height Sheet
+### Custom Sheet Height
+
+Developers should use the `--height` CSS Variable to change the height of the sheet modal instead of changing the last breakpoint in the `breakpoints` array. The reason for this is changing the last breakpoint in the `breakpoints` array to a value less than `1` will cause some of the modal to be inaccessible outside of the viewport.
+
+The following example shows how to get a sheet modal that is automatically sized based on its content. Note that by keeping the maximum breakpoint at `1` we ensure that the entire modal is accessible in the viewport.
import SheetAutoHeightExample from '@site/static/usage/v8/modal/sheet/auto-height/index.md';
-#### Handle Behavior
+### Handle Behavior
Sheet modals can optionally render a handle indicator used for dragging the sheet between breakpoints. The `handleBehavior` property can be used to configure the behavior of when the handle is activated by the user.
diff --git a/versioned_docs/version-v7/api/modal.md b/versioned_docs/version-v7/api/modal.md
index b55c47f73b2..35db3007615 100644
--- a/versioned_docs/version-v7/api/modal.md
+++ b/versioned_docs/version-v7/api/modal.md
@@ -103,9 +103,7 @@ import CanDismissChildStateExample from '@site/static/usage/v7/modal/can-dismiss
-## Types of modals
-
-### Card Modal
+## Card Modal
Developers can create a card modal effect where the modal appears as a card stacked on top of your app's main content. To create a card modal, developers need to set the `presentingElement` property on `ion-modal`.
@@ -121,7 +119,7 @@ import CardExample from '@site/static/usage/v7/modal/card/basic/index.md';
-### Sheet Modal
+## Sheet Modal
:::info
[Content](./content) must be used inside of the sheet modal otherwise your modal content will not be scrollable.
@@ -139,19 +137,23 @@ import SheetExample from '@site/static/usage/v7/modal/sheet/basic/index.md';
-#### Interacting with background content
+### Interacting with background content
import SheetBackgroundContentExample from '@site/static/usage/v7/modal/sheet/background-content/index.md';
-#### Auto Height Sheet
+### Custom Sheet Height
+
+Developers should use the `--height` CSS Variable to change the height of the sheet modal instead of changing the last breakpoint in the `breakpoints` array. The reason for this is changing the last breakpoint in the `breakpoints` array to a value less than `1` will cause some of the modal to be inaccessible outside of the viewport.
+
+The following example shows how to get a sheet modal that is automatically sized based on its content. Note that by keeping the maximum breakpoint at `1` we ensure that the entire modal is accessible in the viewport.
import SheetAutoHeightExample from '@site/static/usage/v7/modal/sheet/auto-height/index.md';
-#### Handle Behavior
+### Handle Behavior
Sheet modals can optionally render a handle indicator used for dragging the sheet between breakpoints. The `handleBehavior` property can be used to configure the behavior of when the handle is activated by the user.