Hi,
Doing it by default is complex. That's because we don't know the width available on your template in the area where you're displaying the listing and the width necessary for each product.
So the only real information is the total width of the window, which allows us to know if you're on a smartphone or a computer and thus switch between several columns to one columns.
Doing something more fancy would mean that in some cases, you would configure 3 columns in the settings of your listing, but you would only see 2 columns on the frontend because the rules we would set wouldn't match with the way your template is done.
Now, with that being said, while we can't do something robust by default for that in HikaShop by default, it's actually quite easy for you to add it for your particular case as we made it so you could do it easily.
For example, on the page /index.php/shop/fahrrad-shop of your website, you have three columns for your products listing.
It's done by the CSS rule below:
@media (min-width:992px) {
.hkc-md-1, .hkc-md-2, .hkc-md-3, .hkc-md-4, .hkc-md-5, .hkc-md-6, .hkc-md-7, .hkc-md-8, .hkc-md-9, .hkc-md-10, .hkc-md-11, .hkc-md-12 { float:left; }
.hkc-md-12 { width:100%; }
.hkc-md-11 { width:91.66666667%; }
.hkc-md-10 { width:83.33333333%; }
.hkc-md-9 { width:75%; }
.hkc-md-8 { width:66.66666667%; }
.hkc-md-7 { width:58.33333333%; }
.hkc-md-6 { width:50%; }
.hkc-md-5 { width:41.66666667%; }
.hkc-md-4 { width:33.33333333%; }
.hkc-md-3 { width:25%; }
.hkc-md-2 { width:16.66666667%; }
.hkc-md-1 { width:8.33333333%; }
}
in the media/com_hikashop/hikashop.css file which states that above a window of 992px of width, the elements of a listing in 3 columns will have each a width of 33.33333%
So you could simply add such CSS on your website:
@media (min-width:992px AND max-width:1300px) {
.hkc-md-4 { width:50% !important; }
}
That means that for a browser width between 992px and 1300px the elements of the listings in 3 columns would have a width of 50%. And thus, in such cases you would actually see them in 2 columns.
That CSS can be added either in your template CSS, or in the CSS of HikaShop (
www.hikashop.com/support/documentation/1...ize-the-display.html
)