Responsive columns using media queries

Hi I am new to Hikashop and I am trying to create a product list layout using Rockettheme template.

I have been able to change listing_img_title.php to suit some of my needs but I can't work out how to get the template to go from 3 columns to 2 and to 1 depending on screen size. At the moment I shrinks the 3 columns then jumps to 1.

How can I use media queries to set the number of columns?

Thanks

Hi,

You can do the modifications in the frontend css file via the menu Configuration > Display > CSS
Use the @media tags to change the width of the columns when the width of the page is less than xx.

ex:
@media (max-width: 767px) {
.hikashop_products .row-fluid .span4 { width: 49% !important;}
}

Here is some documentation about the layout customization:
www.hikashop.com/fr/support/documentatio...ize-the-display.html

Thanks Xavier, it works well.