Product listing in 2 colums on mobile/reponsive view

Hi,

2 columns ? Not 1 ?
Usually you want the grid systems to switch to 1 column on mobile phones so that the products display properly on any smartphone.
So I'm not sure what you're talking about ?

Hi,

The first link is indeed talking about reducing to two columns instead of one and we provided a CSS modification for that.
The second link however is not talking about that. It's talking about swapping from X columns to 3 then, to 2 then to 1 based on the width available on the page.

We cannot have 2 columns by default in the CSS as on most websites/browsers, it wouldn't display properly. That's because HikaShop doesn't have the control of the template display like amazon has on its own website. So we do by default the next best thing. Also, most merchants do want to switch to 1 column display on smartphones. And if you want to have 2 columns instead of 1 it's easy with a bit of CSS.

And regarding changing dinamically the number of elements per row it also not possible by default as we don't know how the template will display and thus we don't know at which point the break points should happen. But again, that can also be done with some simple CSS.

Hi,

There is no option, but as I said in my previous message, it's easy to do with just a bit of CSS and it would be hard to do by default as we don't know how your template is made and how your configured your joomla modules which means that when switching from X columns to 2 and then whenswitching from 2 to 1 (for really small resolutions) will change from one website to another.

Hello,

Of course, we can guide you in order to adapt and custom your HikaShop.
First, have a look on this tutorial to see how to add custom css, and take a look at this W3school documentation about @media.

To summarize the principle of this @media command, it's a condition that define on which kind of media your css command will be apply, example :

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

@media only screen and (max-width: 600px) {
   .page_html_class .element_html_class {
      width : 50%
   } 
}

Hello,

In order to guide can you provide an Url link to your carousel, this will allow us to see the context and be more specific in our advice.
I guess we can achieved what you need trough some css command with the "@media" command ( see documentation about the @media ).

For answer the other part of your question, yes use the second row in order to figure the next "group" is coded like this on purpose.
Awaiting your returns in order to progress on your subject.

Regards

Hello,

We have received your elements but unfortunately we will need the backend access, and your provided references don't work, can you double check it please, and provide valid backend access (via our Contact us form WITH in your message an url link to this topic please) in order to see your carousel configuration please ?

Awaiting your new elements to be able to help you.
Regards

Hello,

Really sorry for this return, but we still cannot access your website back end.
Can you process yourself a test of your provided references, please ?

Once again sorry for this return.
Regards

Hello,

Thanks for your elements, this allow us to see your configuration and better understand what is the best solution for you.
In your case the best solution is to hard coded directly the HikaShop core file to modify parameters specially for mobile view, follow me step by step :
1. Go to YourWebsite\components\com_hikashop\views\product\tmpl folder
2. Open the carousel.php file
3. Go around the line 70, and look for "$slideByFor2 = $this->params->get('one_by_one') ? 1 : 2;"
4. You will see this :

Hello,

Sorry I make a mistake, I realize with your question that you can use the override view ( documentation ), I make again my explanation :
1. From Main HikaShop Configuration => Display dropdown select Views
2. Use 3 dropdown filter with Product/YourTemplate/Front end
3. Find your view Product/Carrousel
4. Then repeat previously describe code modifications in this message .

From this, as you use the override system, even while update your modification will be kept in your custom view folder.
Once again sorry for my previous message.

And we aren't sure to understand your question when you said this :
"Have you thought about enabling the column value with module in mobile view, so the product listing will actually respond to the number of columns set with module? Default could still be 1."
=> Can you detail through a concrete case your idea in this sentence, please ?

Regards