diff --git a/src/app/content/__snapshots__/routes.spec.tsx.snap b/src/app/content/__snapshots__/routes.spec.tsx.snap
index 1d3f15ab18..34e1adb01a 100644
--- a/src/app/content/__snapshots__/routes.spec.tsx.snap
+++ b/src/app/content/__snapshots__/routes.spec.tsx.snap
@@ -543,6 +543,7 @@ Array [
   overflow: visible;
   z-index: 19;
   top: 12rem;
+  padding-bottom: 0;
 }
 
 .c3:focus-within {
@@ -723,6 +724,13 @@ Array [
     left: 0;
     z-index: 21;
     top: 11.3rem;
+    padding-bottom: 0;
+  }
+}
+
+@media screen and (max-width:50em) {
+  .c1 {
+    padding-bottom: 0;
   }
 }
 
diff --git a/src/app/content/components/Page/PageToasts.tsx b/src/app/content/components/Page/PageToasts.tsx
index 640a5a1ecf..f79e677b01 100644
--- a/src/app/content/components/Page/PageToasts.tsx
+++ b/src/app/content/components/Page/PageToasts.tsx
@@ -5,6 +5,9 @@ import {
   bookBannerDesktopMiniHeight,
   bookBannerMobileMiniHeight,
   contentWrapperMaxWidth,
+  toastHeightMediumRes,
+  toastHeightRes,
+  toastHeightSmallRes,
   toolbarMobileSearchWrapperHeight,
   topbarDesktopHeight,
   topbarMobileHeight,
@@ -18,7 +21,7 @@ import { contentWrapperAndNavWidthBreakpoint, contentWrapperWidthBreakpoint } fr
 import { ToastProps } from '../../../notifications/components/ToastNotifications/Toast';
 
 export const desktopSearchFailureTop = bookBannerDesktopMiniHeight + topbarDesktopHeight;
-export const getMobileSearchFailureTop = ({mobileToolbarOpen}: {mobileToolbarOpen: boolean}) => mobileToolbarOpen
+export const getMobileSearchFailureTop = ({ mobileToolbarOpen }: { mobileToolbarOpen: boolean }) => mobileToolbarOpen
   ? bookBannerMobileMiniHeight + topbarMobileHeight + toolbarMobileSearchWrapperHeight
   : bookBannerMobileMiniHeight + topbarMobileHeight;
 
@@ -28,6 +31,7 @@ export const ToastContainerWrapper = styled.div`
   overflow: visible;
   z-index: ${theme.zIndex.contentNotifications - 1};
   top: ${desktopSearchFailureTop}rem;
+  padding-bottom: ${props => props.visibleToasts ? `${toastHeightRes * props.visibleToasts}rem` : '0'};
 
   @media screen and ${contentWrapperAndNavWidthBreakpoint} {
     max-width: calc(100vw - ((100vw - ${contentWrapperMaxWidth}rem) / 2) - ${verticalNavbarMaxWidth}rem);
@@ -44,6 +48,17 @@ export const ToastContainerWrapper = styled.div`
     left: 0;
     z-index: ${theme.zIndex.contentNotifications + 1};
     top: ${getMobileSearchFailureTop}rem;
+    padding-bottom: ${(props: { visibleToasts: number; }) => props.visibleToasts
+      ? `${toastHeightMediumRes * props.visibleToasts}rem`
+      : '0'
+    };
+  `)}
+
+  ${theme.breakpoints.mobileMedium(css`
+    padding-bottom: ${(props: { visibleToasts: number; }) => props.visibleToasts
+      ? `${toastHeightSmallRes * props.visibleToasts}rem`
+      : '0'
+    };
   `)}
 `;
 
@@ -63,7 +78,12 @@ const PageToasts = (props: ToastProps | {}) => {
   const mobileToolbarOpen = useSelector(mobileToolbarOpenSelector);
 
   return (
-    <ToastContainerWrapper role='alertdialog' {...props} mobileToolbarOpen={mobileToolbarOpen}>
+    <ToastContainerWrapper
+      role='alertdialog'
+      {...props}
+      mobileToolbarOpen={mobileToolbarOpen}
+      visibleToasts={toasts?.length}
+    >
       {toasts ? <ToastNotifications toasts={toasts} /> : null}
     </ToastContainerWrapper>
   );
diff --git a/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap b/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap
index 6497adfd11..527649e271 100644
--- a/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap
+++ b/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap
@@ -7,6 +7,7 @@ exports[`PageToasts matches snapshot 1`] = `
   overflow: visible;
   z-index: 19;
   top: 12rem;
+  padding-bottom: 0;
 }
 
 @media screen and (max-width:90em) {
@@ -29,6 +30,13 @@ exports[`PageToasts matches snapshot 1`] = `
     left: 0;
     z-index: 21;
     top: 11.3rem;
+    padding-bottom: 0;
+  }
+}
+
+@media screen and (max-width:50em) {
+  .c0 {
+    padding-bottom: 0;
   }
 }
 
@@ -131,6 +139,7 @@ exports[`PageToasts matches snapshot with toasts when mobile toolbar is open 1`]
   overflow: visible;
   z-index: 19;
   top: 12rem;
+  padding-bottom: 4rem;
 }
 
 @media (max-width:75em) {
@@ -177,6 +186,13 @@ exports[`PageToasts matches snapshot with toasts when mobile toolbar is open 1`]
     left: 0;
     z-index: 21;
     top: 16.6rem;
+    padding-bottom: 6rem;
+  }
+}
+
+@media screen and (max-width:50em) {
+  .c0 {
+    padding-bottom: 8rem;
   }
 }
 
@@ -335,6 +351,7 @@ exports[`PageToasts matches snapshots with toasts 1`] = `
   overflow: visible;
   z-index: 19;
   top: 12rem;
+  padding-bottom: 4rem;
 }
 
 @media (max-width:75em) {
@@ -381,6 +398,13 @@ exports[`PageToasts matches snapshots with toasts 1`] = `
     left: 0;
     z-index: 21;
     top: 11.3rem;
+    padding-bottom: 6rem;
+  }
+}
+
+@media screen and (max-width:50em) {
+  .c0 {
+    padding-bottom: 8rem;
   }
 }
 
diff --git a/src/app/content/components/__snapshots__/Content.spec.tsx.snap b/src/app/content/components/__snapshots__/Content.spec.tsx.snap
index 063ef541a9..4aa6d69d2d 100644
--- a/src/app/content/components/__snapshots__/Content.spec.tsx.snap
+++ b/src/app/content/components/__snapshots__/Content.spec.tsx.snap
@@ -1254,6 +1254,7 @@ Array [
   overflow: visible;
   z-index: 19;
   top: 12rem;
+  padding-bottom: 0;
 }
 
 .c42 {
@@ -2628,6 +2629,13 @@ li[aria-label="Current Page"] .c61 {
     left: 0;
     z-index: 21;
     top: 11.3rem;
+    padding-bottom: 0;
+  }
+}
+
+@media screen and (max-width:50em) {
+  .c78 {
+    padding-bottom: 0;
   }
 }
 
@@ -6001,6 +6009,7 @@ Array [
   overflow: visible;
   z-index: 19;
   top: 12rem;
+  padding-bottom: 0;
 }
 
 .c42 {
@@ -7272,6 +7281,13 @@ li[aria-label="Current Page"] .c61 {
     left: 0;
     z-index: 21;
     top: 11.3rem;
+    padding-bottom: 0;
+  }
+}
+
+@media screen and (max-width:50em) {
+  .c78 {
+    padding-bottom: 0;
   }
 }
 
diff --git a/src/app/content/components/constants.ts b/src/app/content/components/constants.ts
index 57e5ddbaca..c7723ef61c 100644
--- a/src/app/content/components/constants.ts
+++ b/src/app/content/components/constants.ts
@@ -48,4 +48,8 @@ export const mainContentBackground = '#fff';
 export const maxContentGutter = 6;
 export const contentWrapperMaxWidth = contentTextWidth + sidebarDesktopWidth + verticalNavbarMaxWidth;
 
+export const toastHeightRes = 4;
+export const toastHeightMediumRes = 6;
+export const toastHeightSmallRes = 8;
+
 export const defaultTheme = 'blue' as BookWithOSWebData['theme'];