diff --git a/src/css/_settings.scss b/src/css/_settings.scss
index 75eadbc7..3a515de6 100644
--- a/src/css/_settings.scss
+++ b/src/css/_settings.scss
@@ -42,3 +42,7 @@ $mfp-caption-subtitle-color:          #BDBDBD !default;                    // Ca
 
 // A11y
 $mfp-use-visuallyhidden:              false !default;                      // Hide content from browsers, but make it available for screen readers
+
+// breakpoints
+$mfp-mobile-width:                    900px !default;                      // max width to use for mobile breakpoint
+$mfp-mobile-height:                   300px !default;                      // max height for mobile portrait orientation
diff --git a/src/css/main.scss b/src/css/main.scss
index 54964dfb..ebd3df07 100644
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -462,7 +462,7 @@ button {
 
 
   @if $mfp-include-mobile-layout-for-image {
-    @media screen and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px) {
+    @media screen and (max-width: $mfp-mobile-width) and (orientation:landscape), screen and (max-height: $mfp-mobile-height) {
       /**
        * Remove all paddings around the image on small screen
        */
@@ -522,7 +522,7 @@ button {
 
 
 // Scale navigation arrows and reduce padding from sides
-@media all and (max-width: 900px) {
+@media all and (max-width: $mfp-mobile-width) {
   .mfp-arrow {
     -webkit-transform: scale(0.75);
     transform: scale(0.75);