to adjust number of columns to screen width

  • Posts: 222
  • Thank you received: 1
8 years 9 months ago #227792

-- HikaShop version -- : 2.6.1
-- Joomla version -- : 3.4.8

Is there a possibility to adjust product listing page columns to screen width? I did that in custom.css, but only some rows show it perfect, some rows not - two or three of four... (it depends on the number of columns) images overlay each other in the first column of some rows (if I set 6 columns in hikashop product settings). If set to 0, than is showing one column.
Can I disable this setting in hikashop product settings? Maybe than everything will be fine?
I have from 1700px width screen 6 columns (product img width = 250px). I want to have:
* from 1400px width screen 5 columns;
* from 1200px width screen 4 columns;
* from 900px width screen 3 columns;
* from 600px width screen 2 columns;
* to 599px width screen 1 column.

Thanks for help

Last edit: 8 years 9 months ago by Vero.

Please Log in or Create an account to join the conversation.

  • Posts: 12953
  • Thank you received: 1778
8 years 9 months ago #227830

Hello,
Using some CSS code like media queries will probably help you to do it, 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


Also, I didn't totally understood what you meant by that :

Can I disable this setting in hikashop product settings? Maybe than everything will be fine?

Last edit: 8 years 9 months ago by Mohamed Thelji.

Please Log in or Create an account to join the conversation.

  • Posts: 222
  • Thank you received: 1
8 years 9 months ago #227905

I wrote I added css and it was not goed, but I found the mistake and now is all perfect, just two small extra adds in css in ul>li.

Please Log in or Create an account to join the conversation.

Time to create page: 0.052 seconds
Powered by Kunena Forum