Datafeedr Support Forums  

Go Back   Datafeedr Support Forums > Current Version (V3) Forum > Tips, Tricks & Tutorials
Home Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Important - The support forums are now in "read-only" mode as we transition to an alternative help desk solution. Feel free to contact us here with any of your questions or search the forums for an existing solution.
 
 
Thread Tools Search this Thread Display Modes
Prev Previous Post   Next Post Next
  #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%;}	
}
 


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Wife can't see product styles properly (NOT BLIND!) brentwz Feature Requests 2 February 29th, 2012 09:33 PM
Store columns appearing on all pages (except home) Giftoly Questions 3 January 8th, 2012 10:34 AM
Store not showing in 3 columns reimust Problems 9 November 25th, 2011 02:43 AM
Store not showing in 3 columns dtmcollins Problems 7 September 12th, 2011 09:56 AM
Store categorys showing in 2 columns? retailoffers Questions 3 February 24th, 2011 08:47 AM


All times are GMT -5. The time now is 12:51 PM.


Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.