CSS styles to make your store's columns responsive

[Eric]

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.

/**
 * 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%;}	
}

[digitalcow]

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

[Eric]

Hi,

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

Eric

[digitalcow]

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

[Eric]

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:

@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

[digitalcow]

Thanks, will have a play

[urbanlymedia]

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?

[Eric]

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

[lukasbrisman]

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.

[Eric]

Hi,

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

/**
 * 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

[lukasbrisman]

Woah. Works awesome!

Have i ever mentioned how impressed i am by your support? You rock Eric!

[Eric]

You're welcome!

[lukasbrisman]

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

[Eric]

Cool, thanks for sharing!

[vhekler]

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

[Eric]

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

[surfheads]

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

[Eric]

Hi,

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

Eric

[surfheads]

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/

[Eric]

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:

<!-- 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:

<!-- 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