#2092

assets/css/base/_layout.scss

@@ -38,6 +38,10 @@ body{
     @media only screen and (max-width: $small-bp), (orientation: portrait) {
       padding:1em $side-padding/2 0 $side-padding/2;
     }
+    // iphone
+    @media only screen and (max-width: $iphone-bp), (orientation: portrait) {
+      padding:1em $side-padding/2 1em $side-padding/2;
+    }
   }
   section[role="main-content"]{
     display: flex;
@@ -60,6 +64,10 @@ body{
         overflow-y: auto;
         padding:0 $side-padding/2 0 $side-padding/2;
       }
+      // iphone
+      @media only screen and (max-width: $iphone-bp), (orientation: portrait) {
+        // padding:0 $side-padding/4 0 $side-padding/4;
+      }
     }
     .main-content-layout{
       position: relative;

assets/css/base/_variables.scss

@@ -5,6 +5,7 @@ $base-line:28px;
 $default_gap: 1em;
 $default_sum: 12; // total number of columns
 
+$iphone-bp: 428px;
 $small-bp:768px;
 $med-bp:1080px;
 $ipad-bp: 1536px;