Responsive number of columns

  • Posts: 56
  • Thank you received: 0
6 years 10 months ago #271032

-- HikaShop version -- : 3.1.1
-- Joomla version -- : 3.7.2
-- PHP version -- : 7.?

Hi,

I am just working on a replacement site for our current one both using the same version on hikashop so the issue is the same on both. Im sure I am missing something simple but when you reduce the browser width the columns at a certain point change from the 3 I have as standard for a desktop straight to 1 column. I am trying to get it to function in a bit more of a refined manner by going from 3 down to 2 then to one. Can you advise how I would do this in this verion of hikashop.

Cheers

Martyn

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

  • Posts: 81509
  • Thank you received: 13065
  • MODERATOR
6 years 10 months ago #271041

Hi,

For now the responsive system goes from several to 1 column. There is no option to change that.
You can add custom CSS code using the @query system of CSS to have it switch to 2 columns.

www.hikashop.com/forum/4-how-to/881888-t...to-screen-width.html
www.hikashop.com/forum/2-general-talk-ab...g-media-queries.html
The method is still the same if you have the new listing system, but the class names are a bit different.
Instead of .row-fluid .span4, you could use .hikashop_product in your CSS and that should do it with all the versions of HikaShop.

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

  • Posts: 56
  • Thank you received: 0
6 years 10 months ago #271186

HI Nicolas,

Many thanks for your reply. I have added the below to my custom CSS and it has made it drop to 2 columns below 767px however all the items only show in one of the columns. I have left this like it on out site so you can see what I mean.

@media (max-width: 767px) {
.hikashop_product{ width: 49% !important;}
}

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

  • Posts: 81509
  • Thank you received: 13065
  • MODERATOR
6 years 10 months ago #271190

Hi,

For some reason you don't have a float:left on the products on your website.
So you should try:
@media (max-width: 767px) {
.hikashop_product{ width: 49% !important; float:left !important; }
}

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

Time to create page: 0.061 seconds
Powered by Kunena Forum