Datafeedr Support Forums

Datafeedr Support Forums (http://www.datafeedr.com/forums/index.php)
-   Tips, Tricks & Tutorials (http://www.datafeedr.com/forums/forumdisplay.php?f=66)
-   -   CSS styles to make your store's columns responsive (http://www.datafeedr.com/forums/showthread.php?t=9294)

Eric June 27th, 2013 10:04 AM

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


digitalcow July 11th, 2013 02:39 AM

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 July 11th, 2013 08:13 AM

Hi,

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

Eric

digitalcow July 14th, 2013 04:44 AM

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 July 14th, 2013 09:12 AM

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

digitalcow July 14th, 2013 10:44 AM

Thanks, will have a play

urbanlymedia August 18th, 2013 03:57 PM

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 August 18th, 2013 04:24 PM

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 January 14th, 2014 02:32 PM

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 January 14th, 2014 02:57 PM

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

lukasbrisman January 14th, 2014 03:05 PM

Woah. Works awesome!

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

Eric January 14th, 2014 03:12 PM

You're welcome!

lukasbrisman January 14th, 2014 03:58 PM

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 January 14th, 2014 04:02 PM

Cool, thanks for sharing!

vhekler May 11th, 2014 06:37 PM

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

Eric May 11th, 2014 08:47 PM

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 May 31st, 2014 01:37 AM

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 May 31st, 2014 08:29 AM

Hi,

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

Eric

surfheads May 31st, 2014 05:09 PM

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 May 31st, 2014 08:39 PM

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


All times are GMT -5. The time now is 06:29 PM.

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