SocialConnect responsive styles. A simple addition to SocialConnect compact template.

gistfile1.css

/* Force load the module on the right (optional) */
#modSocialConnectCompact .socialConnectLeft { right: 0; left: auto; }
#modSocialConnectCompact .socialConnectLeft:after, #modSocialConnectCompact .socialConnectLeft:before { right: 50%; left: auto; }

/* responsive styling */
@media screen and (max-width: 600px) {
	#modSocialConnectCompact .socialConnectSignInBlockContainer { max-width: 100%; }
	#modSocialConnectCompact .socialConnectSignInBlock, #modSocialConnectCompact .socialConnectServicesBlock { float: none; clear: both; width: 100%;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box; }
	
	#modSocialConnectCompact .socialConnectLink { float: left; }
	#modSocialConnectCompact .socialConnectInput { width: 100%;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box; height: 40px;  }
	
	#modSocialConnectCompact .socialConnectServiceButton { margin: 0 0 14px; }
	#modSocialConnectCompact .socialConnectServicesBlock .socialConnectInnerBlock { padding-top: 0; }
	#modSocialConnectCompact .socialConnectSignInBlock .socialConnectInnerBlock { padding-bottom: 0; }
	#modSocialConnectCompact .socialConnectRegistrationButton { float: none; clear: both; }

}