Product listing display - mobile issues

-- url of the page with the problem -- : www.audleymotors.co.uk/engine-treatments
-- HikaShop version -- : 2.2.1
-- Joomla version -- : 3.1.5
-- PHP version -- : 5.4

Hi,

I'm having an issue with the way the products are listed. Everything is fine when the browser is full-width, however as I decrease the width (to simulate viewing on a smaller device) the 4th product seems to jump between rows rather than staying in the same row.

I've had a play around but would like suggestions on how to correct this? I initially had 5 products in a row and everything worked fine without issues, however with 4 products in a row I have this issue.

Thanks

Hi,

The problem is that, with some specific browser width, the products block content are too large. So the content is larger than it should be, taking more place than the 22% of the page width.
It could be the add to cart button or maybe something else. It require tests to determine it.
I just test to remove the margin between blocks (which is a margin of 2%) and it display the four blocks good. But it's not the right solution, just a test.

I think you have to add some specific rules with the small width (using the @media) in order to change the design of some elements for these small screen sizes.

Regards,

I'm not sure if it's any of the other elements on the page - why would it work fine with 5 products in a row but not 4?

Hi,

I don't know.
We are developers, not designers.

Regards,

Fair enough and appreciate the honesty. There was a bug in the design that I highlighted and fixed (and it got implemented in 2.2.1), so maybe I'll be able to do this again. In the meantime, if anyone else can shed some light on this, would be appreciated.