ModalSwapImageFormOrder.js

(function() {
	// I would love to use matchmedia but its not supported by IE9, instead lets check the viewport width onresize
	var $lightbox_form_container = $('.new_user_lightbox_form_container');

	// run onload
	updateModal();

	// run onresize
	$(window).resize(updateModal);

	function updateModal() {
		var w = window.innerWidth;

		// remove all inline styles first and keep the DOM clean
		$($lightbox_form_container).find('style').remove();

		// a way to override the pseudo ::before styles of the image
		$('<style>::before{ left:0; }</style>').prependTo($lightbox_form_container);

		// check if we match our ranges and apply css changes
		if(w >= 620 && w < 840) {
			$lightbox_form_container.css({'margin-left':'202px'});
		} else if(w >= 840) {
			$lightbox_form_container.css({'margin-left':'300px','margin-top':'1.5rem'});
		} else {
			// remove margin for mobile (anything below 620px)
			$lightbox_form_container.css({'margin-left':'0'});
		}
	}
}());