From cdcea7046e6622ffc7bc1abb6ca7b34cb65b185c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonathan=20Wei=C3=9F?= <bitbucket@jonathanweiss.net>
Date: Thu, 5 Jun 2014 17:49:07 +0200
Subject: [PATCH] Fix position of close button on small screens

---
 CHANGELOG.md              | 2 +-
 plugins/modal-maxwidth.js | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 952c63e..83a5ffe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,7 @@
 # Changelog
 
 ## HEAD
-
+* Fix position of close button on small screens
 * Fix max-width plugin to work on all sizes and listen to resize
 
 ## 1.1.3 - 05.06.2014
diff --git a/plugins/modal-maxwidth.js b/plugins/modal-maxwidth.js
index 398dbd4..26b9dcf 100644
--- a/plugins/modal-maxwidth.js
+++ b/plugins/modal-maxwidth.js
@@ -18,6 +18,8 @@
 	// can be overwritten with `data-cssmodal-margin` attribute
 	var _margin = 20;
 
+	var MODAL_SMALL_BREAKPOINT = 480;
+
 	/**
 	 * Include styles into the DOM
 	 * @param {string} rule Styles to inject into the DOM
@@ -64,12 +66,17 @@
 	var _scaleLower = function () {
 		var innerWidth = global.innerWidth || document.documentElement.clientWidth;
 		var element = CSSModal.activeElement;
+		var closeButtonMarginRight = '-' + Math.floor(_currentMaxWidth / 2);
 
 		// Skip if there is no max width or the window is wider
 		if (!_currentMaxWidth || innerWidth > _currentMaxWidth) {
 			return;
 		}
 
+		if (innerWidth < MODAL_SMALL_BREAKPOINT) {
+			closeButtonMarginRight = 10;
+		}
+
 		// Window width minus margin left and right
 		_margin = parseInt(element.getAttribute('data-cssmodal-margin'), 10) || _margin;
 		_currentMaxWidth = innerWidth - (_margin * 2);
@@ -80,7 +87,7 @@
 		'}' +
 
 		'[data-cssmodal-maxwidth] .modal-close:after {' +
-			'margin-right: -' + (_currentMaxWidth / 2) + 'px !important;' +
+			'margin-right: ' + closeButtonMarginRight + 'px !important;' +
 		'}', element.id);
 	};