View Single Post
  #1  
Old June 27th, 2013, 10:04 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default CSS styles to make your store's columns responsive

Here's some code I put together to give your store some responsiveness. You can add this code to your store's Custom CSS (instructions).

This only affects columns (ie. the following 4 CSS classes: .col2, .col3, .col4 & .col5). It does not affect any other elements in your store however the framework is there to add further CSS styling to the media queries.

Code:
/**
 * Media queries from:
 * http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
 */

/**
 * Smartphones (portrait and landscape)
 */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	#view .col2,
	#view .col3,
	#view .col4,
	#view .col5 {width:99.9%;}
}

/**
 * Smartphones (landscape)
 */
@media only screen 
and (min-width : 320px)
and (max-width : 480px) {
	#view .col2,
	#view .col3,
	#view .col4,
	#view .col5 {width:99.9%;}
}

/**
 * Smartphones (portrait)
 */
@media only screen 
and (max-width : 320px) {
	#view .col2,
	#view .col3,
	#view .col4,
	#view .col5 {width:99.9%;}
}

/**
 * iPads (portrait and landscape)
 */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
	#view .col3 {width:49.9%;}
	#view .col4 {width:49.9%;}
	#view .col5 {width:99.9%;}	
}

/**
 * iPads (landscape)
 */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	#view .col3 {width:49.9%;}
	#view .col4 {width:49.9%;}
	#view .col5 {width:49.9%;}		
}

/**
 * iPads (portrait)
 */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	#view .col3 {width:49.9%;}
	#view .col4 {width:99.9%;}
	#view .col5 {width:99.9%;}		
}

/**
 * Desktops and laptops
 */
@media only screen 
and (min-width : 360px) 
and (max-width : 768px) {
	#view .col2,
	#view .col3,
	#view .col4,
	#view .col5 {width:99.9%;}	
}

/**
 * iPhone 4
 */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
	#view .col2,
	#view .col3,
	#view .col4,
	#view .col5 {width:99.9%;}	
}