SB Lite Posted October 13, 2014 Share Posted October 13, 2014 Hi Is it possible to make the images smaller when viewed on a mobile device. At the moment on my store, if you view it on an iPhone 6 it only shows one column of products. It would be nice to make the images smaller to view two columns, both on the home page and in product lists. Thanks 1 Link to comment Share on other sites More sharing options...
DrunkBug Posted October 14, 2014 Share Posted October 14, 2014 Hi Is it possible to make the images smaller when viewed on a mobile device. At the moment on my store, if you view it on an iPhone 6 it only shows one column of products. It would be nice to make the images smaller to view two columns, both on the home page and in product lists. Thanks To make images responsive, you need to add a class="img-responsive" for your images. But this is not a solution in your case. Products are displayed as list items in <li> tags, and you need to add classes "col-xs-6" or something similar to those tags in coresponding .tpl files. I.e. there's 12 columns in the grid, so if you want to display 2 columns, you need to put "col-xs-6" to your list items. To show 3 columns, you need to put col-xs-4 and so on. But, col-xs-* is used for small resolutions, like smartphones. There's also col-sm-*, col-md-* and col-lg-* classes, so you can put <li class="col-xs-6 col-md-4">, and it will show 2 columns on mobile device, and 3 columns on desktop. You should read bootstrap documentation to know more about using bootstrap grids. It's hard to explain everything in this one small post. 1 Link to comment Share on other sites More sharing options...
Recommended Posts