The following code snippets help you sculpt your website whilst keeping it mobile friendly via responsive CSS rules

Element Level

/* hide a module at a specific width */
@media only screen and (max-width: 960px), (max-device-width: 960px) {
	#jsn-pos-user-bottom {
		display:none;
	}
}

Other Examples

@media only screen and (max-width: 960px), (max-device-width: 960px) {	
}	

@media only screen and (max-width: 1024px), (max-device-width: 1024px) {	
}

Ranged Examples

/* Set a Range */
@media (min-width: 980px) and (max-width: 1200px) {
    #rsfe_searchbox {
        width: 100%;
    }
}

Style Examples

/* For Mobiles - Black background and gold border for content */
@media only screen and (max-width: 960px) {
	#jsn-content #jsn-maincontent {
		background-color: black;
		border: 1px solid #DBB054;
	}
}

/* Removes the white background issue on mobiles  */
@media only screen and (max-width: 960px), (max-device-width: 960px){
	[id*="jsn-content_inner"], [id*="jsn-maincontent_inner"] {
	background: transparent !important;
	}
}
@media only screen and (max-width: 960px){
	#jsn-content #jsn-maincontent {
	background: transparent !important;
	}
}