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
  #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%;}	
}
  #2  
Old July 11th, 2013, 02:39 AM
digitalcow digitalcow is offline
 
Join Date: Jun 2010
Posts: 494
Default

Eric, I tried this code and it works perfectly on my BB Q10 phone, however on my tablet which is 7 inches I think. Is there something I could edit in the above code?

On the tablet I just get the normal desktop view.

Thanks
  #3  
Old July 11th, 2013, 08:13 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi,

What are the landscape and portrait width in pixels of your display?

Eric
  #4  
Old July 14th, 2013, 04:44 AM
digitalcow digitalcow is offline
 
Join Date: Jun 2010
Posts: 494
Default

According to the Lenovo website, it is 1280 x 800.

Would I just add this to the code?

and (min-device-width : 800px)
and (max-device-width : 1280px)
and (orientation : portrait) {
#view .col3 {width:49.9%;}
#view .col4 {width:99.9%;}
#view .col5 {width:99.9%;}
}


many thanks
  #5  
Old July 14th, 2013, 09:12 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi,

That's why it's not working... 1280px wide would definitely be considered a desktop resolution and no responsive CSS rules would be applied.

You could try:

Code:
@media only screen 
and (min-device-width : 800px) 
and (max-device-width : 1280px) 
and (orientation : portrait) {
	#view .col3 {width:49.9%;}
	#view .col4 {width:99.9%;}
	#view .col5 {width:99.9%;}		
}
However I am pretty sure that will mess up the display of your site on regular desktop browsers... so test accordingly.

Eric
  #6  
Old July 14th, 2013, 10:44 AM
digitalcow digitalcow is offline
 
Join Date: Jun 2010
Posts: 494
Default

Thanks, will have a play
  #7  
Old August 18th, 2013, 03:57 PM
urbanlymedia urbanlymedia is offline
 
Join Date: Oct 2012
Posts: 17
Default

Website URL: http://www.urstyle.com
URL to page in question: http://www.urstyle.com/shop

This doesn't work properly when using a retina macbook pro any ideas?
  #8  
Old August 18th, 2013, 04:24 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi,

Most of the CSS code is not written for desktop/laptop screens. It's written specifically for mobile devices. Therefore it won't render on your laptop.

I don't have retina macbook pro (just a regular MBP) so I can't speak for what your images are doing. However none of the code takes image size into consideration.

Your store looks fine on my Nexus phone.

The code above is mostly a stop-gap measure until we release our next iteration of Datafeedr (no ETA yet).

Eric
  #9  
Old January 14th, 2014, 02:32 PM
lukasbrisman lukasbrisman is offline
 
Join Date: Dec 2013
Posts: 19
Default

Website URL: Showrum . se

Worked great! You don't by any chance have any tips on how to make the product-page (template) responsive on my site as well? All i see is the picture when surfing in on my cellphone on the product pages now.
  #10  
Old January 14th, 2014, 02:57 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi,

You can add the following CSS code to make your Product Details page responsive:

Code:
/**
 * Smartphones (landscape)
 */
@media only screen 
and (min-width : 320px)
and (max-width : 480px) {

	#view .sp .lc { width: 100%; }
	#view .sp .rc
	{
		margin-left: 0;
		padding-left: 0;
	}

}
Eric

Last edited by Eric : January 14th, 2014 at 02:59 PM. Reason: Edited the code.
  #11  
Old January 14th, 2014, 03:05 PM
lukasbrisman lukasbrisman is offline
 
Join Date: Dec 2013
Posts: 19
Default

Woah. Works awesome!

Have i ever mentioned how impressed i am by your support? You rock Eric!
  #12  
Old January 14th, 2014, 03:12 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

You're welcome!
  #13  
Old January 14th, 2014, 03:58 PM
lukasbrisman lukasbrisman is offline
 
Join Date: Dec 2013
Posts: 19
Default

Oh yeah. I also solved the MacBook Retina problem as i also have one of those.

I just removed the last custom-css bit:
/**
* 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%;}
}

And then it worked fine on the Retina and all other devices i tested
  #14  
Old January 14th, 2014, 04:02 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Cool, thanks for sharing!
  #15  
Old May 11th, 2014, 06:37 PM
vhekler vhekler is offline
 
Join Date: Feb 2014
Posts: 23
Default IPhone 5

Store ID: 44535
URL to page in question: Iphone 5 View

Hi Eric,

I have insert the codes above, but it don't work at my iphone 5, I have 3 columns.
Can you help me?

regards

Marvin
  #16  
Old May 11th, 2014, 08:47 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi Marvin,

I only see a small part of the code from above in your Custom CSS. You need to copy and paste all of the code.

Eric
  #17  
Old May 31st, 2014, 01:37 AM
surfheads surfheads is offline
 
Join Date: Apr 2014
Posts: 13
Default

Store ID: 45144
Website URL: surfheads.com


Hello,
The responsive code works great on my products detail page, but my product list is not displaying on any device, any suggestions? Also the sorting template disappears on mobile device, any suggestions. Thanks.


www.surfheads.com/example.png

Last edited by surfheads : May 31st, 2014 at 01:41 AM.
  #18  
Old May 31st, 2014, 08:29 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi,

I'm unable to test your site because it's password protected.

Eric
  #19  
Old May 31st, 2014, 05:09 PM
surfheads surfheads is offline
 
Join Date: Apr 2014
Posts: 13
Default

Store ID: 45144
Website URL: surfheads.com
URL to page in question: http://surfheads.com/surf-shop/store...s-boardshorts/

Sorry about that Eric, you should be able to access it now, thanks.


http://surfheads.com/surf-shop/store...s-boardshorts/
  #20  
Old May 31st, 2014, 08:39 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi,

That's because you have removed all of the code responsible for displaying products from this module: The Factory > Your Store > VIEWS > CATEGORY PAGE > Default > Product list module > Theme Settings ()

You have this:

HTML Code:
<!-- Pagination Links (Top) -->

<!-- /Pagination Links (Top) -->
<div class="dffltrs">
  <form method="get">
    <span class="dflside">
      Products per page:
      <?php echo datafeedr_tools()->form_select("ppp",
        array(
        "12" => "12",
        "24" => "24",
        "36" => "36",
        "48" => "48",
        )); ?>
    </span>
    <span class="dfrside">
      Sort by:
      <?php echo datafeedr_tools()->form_select("sort",
        array(
        "price"   => "Price (low to high)",
        "-price"   => "Price (high to low)",
        "name"     => "Product Name (a - z)",
        "-name"   => "Product Name (z - a)",
        )); ?>
      <input type="submit" value="Go" class="dfsbmt" />
    </span>
    <div class="clearingdiv">&nbsp;</div>
  </form>
</div>
    
<!-- /Product List -->


<!-- Pagination Links (Bottom) -->
<div class="pgr">
  Pages:
  [pager.first text='<img src="[server.plugin_url]/first.gif" alt="first page" />' alt='']
  [pager.prev text='<img src="[server.plugin_url]/prev.gif" alt="prev page" />' alt='']
  [pager.pages delim=' ']
  [pager.next text='<img src="[server.plugin_url]/next.gif" alt="next page" />' alt='']
  [pager.last text='<img src="[server.plugin_url]/last.gif" alt="last page" />' alt='']
</div>
<!-- /Pagination Links (Bottom) -->
It should be this:

HTML Code:
<!-- Pagination Links (Top) -->

<!-- /Pagination Links (Top) -->
<div class="dffltrs">
  <form method="get">
    <span class="dflside">
      Products per page:
      <?php echo datafeedr_tools()->form_select("ppp",
        array(
        "12" => "12",
        "24" => "24",
        "36" => "36",
        "48" => "48",
        )); ?>
    </span>
    <span class="dfrside">
      Sort by:
      <?php echo datafeedr_tools()->form_select("sort",
        array(
        "price"   => "Price (low to high)",
        "-price"   => "Price (high to low)",
        "name"     => "Product Name (a - z)",
        "-name"   => "Product Name (z - a)",
        )); ?>
      <input type="submit" value="Go" class="dfsbmt" />
    </span>
    <div class="clearingdiv">&nbsp;</div>
  </form>
</div>
    
<!-- /Product List -->


<div class="pl">
  [product.each]
  <div class="t1 col3">
  <div class="bdr">
    <h2><a href="[product.link]" title="[product.name]">[product.name]</a></h2>
    <div class="thmb"><a href="[product.link]" title="[product.name]">[product.image tag='1']</a></div>
    <div class="prc">[product.currency mode='sign'][product.price]</div>
    <p class="desc">[product.description]</p>
    <div class="btns">
    <a href="[product.link]" title="View details [product.name]" class="dfbutton dforange dfmedium">Details</a>
    <a href="[product.url direct='0']" title="Buy [product.name]" class="dfbutton dforange dfmedium" rel="nofollow">Buy</a>
    </div>
    <div class="clearingdiv"> </div>
  </div>
  </div>
  [/product.each]
  <div class="clearingdiv"> </div>
</div>

<!-- Pagination Links (Bottom) -->
<div class="pgr">
  Pages:
  [pager.first text='<img src="[server.plugin_url]/first.gif" alt="first page" />' alt='']
  [pager.prev text='<img src="[server.plugin_url]/prev.gif" alt="prev page" />' alt='']
  [pager.pages delim=' ']
  [pager.next text='<img src="[server.plugin_url]/next.gif" alt="next page" />' alt='']
  [pager.last text='<img src="[server.plugin_url]/last.gif" alt="last page" />' alt='']
</div>
<!-- /Pagination Links (Bottom) -->
Eric
 


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 02:38 PM.


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