Fix position of close button on small screens

drublic · Jun 5, 2014 · cdcea70 · cdcea70
1 parent f0360e3
commit cdcea70
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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);
 	};