• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Marek
  • Private: No
  • Open Date: 15.09.17, 00:07
  • Opened by: Andreea Savu
  • Closed by: Marek
  • Closed on: 29.10.17, 15:32
  • Reason: Closed
  • Comment: Glad to help!

Ticket #10800 - Issue w no. of products per row

Hello Marek, Team,

We have an issue with the no. of products per row inside the product list on desktop. As you can see from the attached screen shots (BAGS category on our store), sometimes we have only one or 2 products displayed per row instead of 3, normally configured. Even if we hit Show all, we sometimes have issues (3rd screen shot attached).

I’ve tried to regenerate thumbnails many times, but the action gets stuck in a never ending loop.

My guess is the contained is too big and product_list.css needs to be updated, however I cannot find the right fit. Or maybe alysum.css needs to be updated too? Can you help?

Secondly, I would like to change the number of products per row in mobile from 1 to 2. I’ve updated product-list.tpl to the right variables in NbItems, but nothing changes. Would you be able to look into this, please?

Thank you!
Andreea

Comments

Marek 15 Sep 2017, 12:55

Hi Andreea.
1. The fix for products is:

.product_list {display: flex;flex-wrap: wrap;}

2. Thank is not good idea to have two products per row:
media.promokit.euscreenshotsscreencloudscreenshot20170915_125502.jpg

Andreea Savu 15 Sep 2017, 13:39

Omg, you are awesome! Product list is fixed now! There were 2 developpers who looked into this and have given all kinds of wrong useless solutions like changing image sizes or container width. THANK YOU, THANK YOU, THANK YOU!

Re 2 products per row, that’s definitely not the end result we want. It’s the frame around the pictures that gives this awful view, it will most probably be better without. I have just noticed that this is visible also in desktop view. Any idea how we can get rid of it?

Marek 15 Sep 2017, 14:11

No problem, it’s my work ;)

To remove border use following CSS

body .view_grid ul.product_list > li img {border:none}