Displaying

-- url of the page with the problem -- : www.stigsbergsgard.se/index.php/hikashop...category/31-benskydd
-- HikaShop version -- : 2.2.2
-- Joomla version -- : 2.5.14
-- PHP version -- : 5.3.3
-- Browser(s) name and version -- : Mobile devices
-- Error-message(debug-mod must be tuned on) -- : Error_message

Hi,
In all of my HikaShop sites I have a little specific problem. This is only occuring when using a mobile device and is pretty easy to pin-point but not to solve (not for me at least).
If you for example go to the above URL on a mobile device like iphne or Samsung Galaxy S4 (or any mobile phone) it looks weird because the products are listed in 4 columns.
I want 4 columns on regular destops and laptops and ipads but on a narrow screen like an upright iphone or android the view is too narrow and it doesn't look good at all.
Is it somehow possible to set up as only one column when using a narrow screen like those?

Thanks
Micke

Hi Micke,

I think that a solution can be to use Media queries through your CSS file, here is a thread where you'll find an example :

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/support/documentation/1...ize-the-display.html

I am familiar with the css file modifications but it doesn't seem to have any effect whatsoever value I put into the:'
@media (max-width: 767px) {
.hikashop_products .row-fluid .span4 { width: 49% !important;}
}

I have tried tp change the .. width: 49% !important; between 5% and 95% but it looks the same on my mobile phone :huh:

This was just an example.
In your case, you should use something like that:
@media (max-width: 767px) {
.hikashop_product{ width: 100% !important;}
}

Hi,
Thanks this made it work!
I set it up like this:
@media (max-width: 767px) {
.hikashop_product{ width: 100% !important;}
}

But with another site: www.fly-tiers.se/index.php/torrflugor-2
It doesn't work...

Why isn't it working here? I have tried different max-width values...

That link doesn't work so I couldn't see. Could you provide a valid link ?

Hi,
Ok sorry here's a working link but the problem is partly solved with your code:
www.fly-tiers.se/index.php/en/dry-flies

Now the only thing remainng is the subcategories listing that is above the products listing.
If there are sub categories they are set up to be listed in 4 columns just like the products and to enable the mobile narrow view rule on them I have set up this rule:

@media max-width: 500px) {
.hikashop_subcategories{ width: 100% !important;}
}

But it doesn't seem to work. What class should I use if not hikashop_subcategories have any effect?
Thanks.
/Micke

Hi,

You need to apply this property on:

Thank you Xavier, now it works just fine!