Device support - ngeshlew/responsive-html5-web-form GitHub Wiki

For responsiveness, media queries have been used for the different device platforms using the responsive-square class:

@media only screen and (min-width: 768px){
	.responsive-square 	{ 
		max-width: 650px;  
		margin-left: auto; 
		margin-right: auto; 
		padding: 0.8em; 
		transition:width 2s, height 2s; 
		-webkit-transition:width 2s, height 2s; 
	}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
		.responsive-square 	{ 
		padding: 20px 5%;
		transition:width 2s, height 2s; 
		-webkit-transition:width 2s, height 2s; 
		width: 450px; 
	}
		.responsive-square form {margin-left: auto;  margin-right: auto;}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
		.responsive-square 	{ 
		display: inline-block; 
		padding: 20px 5%; 
		transition:width 2s, height 2s; 
		-webkit-transition:width 2s, height 2s; 
		width: 300px; 
	}
		.responsive-square form { position:relative;margin-left: auto;  margin-right: auto;}
}
@media only screen and (max-width: 319px) {
		.responsive-square 	{ 
		display: block; 
		padding: 10px 5%; 
		transition:width 2s, height 2s; 
		-webkit-transition:width 2s, height 2s; 
		width: 295px; 
	}
		.responsive-square form{ position:relative; top: 10px; left:10px;}
}

This javascript to the head of our template to hide the URL Bar when the page loads on the iPhone.

<script type="application/x-javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}

function hideURLbar() {
window.scrollTo(0, 1);
}

</script>
⚠️ **GitHub.com Fallback** ⚠️