diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index c171eafff8..0dbe43c1ae 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -32,11 +32,35 @@ body.backdrop-no-scroll {
 
 // Modal - Card Style
 // --------------------------------------------------
-// The card style does not reach all the way to
-// the top of the screen, so there does not need
-// to be any safe area padding added
-html.ios ion-modal.modal-card .ion-page > ion-header > ion-toolbar:first-of-type {
-  padding-top: 0px;
+/**
+ * Card style modal needs additional padding on the 
+ * top of the header. We accomplish this by targeting
+ * the first toolbar in the header.
+ * Footer also needs this. We do not adjust the bottom
+ * padding though because of the safe area.
+ */
+html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,
+html.ios ion-modal ion-footer ion-toolbar:first-of-type {
+  padding-top: 6px;
+}
+
+/**
+* Card style modal needs additional padding on the 
+* bottom of the header. We accomplish this by targeting
+* the last toolbar in the header.
+*/
+html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type {
+  padding-bottom: 6px;
+}
+
+/**
+* Add padding on the left and right
+* of toolbars while accounting for
+* safe area values when in landscape.
+*/
+html.ios ion-modal ion-toolbar {
+  padding-right: calc(var(--ion-safe-area-right) + 8px);
+  padding-left: calc(var(--ion-safe-area-left) + 8px);
 }
 
 // .ion-page needs to explicitly inherit