• Priority: 0
  • Status: Closed
  • Theme: Venedor
  • Assigned To: Fred
  • Private: No
  • Open Date: 23.03.20, 11:43
  • Opened by: Lite Solutions
  • Closed by: Fred
  • Closed on: 01.04.20, 12:24
  • Reason: Closed
  • Comment: Glad to help!

Ticket #17100 - Products per row in categories

Hi!

We have configured categories to use full width. We have set the “Products per Row” to 4 on Venedor settings. We are displying 12 products per category page.

While we navigate on different devices we found we see 5, 4, 3 or 2 columns, depending on screen width. Our problem is that products doesn’t fit all product page when displaying 5 products per row, so customers have the feeling there are no more products. To fulfill category page for all resolutions we should display 60 products per page.

A solution for us would be to display 6, 4, 3 and 2 products per row, but there is no such option. If we use 6 on “Products per Row”, then we get views of 6, 5, 4, 3 and 2 rows depending on device width.

Do you have any solution for this situation?

Thank you

Comments

Fred 23 Mar 2020, 23:11

Don’t you want to display 10 products instead of 12?
You can also try the following CSS:

body.product-grid-4 .products, body .products.product-local-grid-4 {
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
}
Lite Solutions 23 Mar 2020, 23:21

Hi! I cant set 12 to be displayed, but then when I reduce windows and shows 4 elements per row I get 4/4/2 (again an incomplete row)

I don’t understand how your CSS solves my problem… I have tested with no success.

I will try to explain with examples.

Example 1:
6 products per row
While I shrink the window, I will see 6, then 5, then 4, then 3 and finally 2 products per row
If I set 12 products I will get 6/6, 5/5/2, 4/4/4, 3/3/3/3 and finally 2/2/2/2/2/2 elements on each row. It “fails” to fulfill when are shown 5 items per row

Example 2:
6 products per row
While I shrink the window, I will see 6, then 5, then 4, then 3 and finally 2 products per row
If I set 10 products I will get 6/4, 5/5, 4/4/2, 3/3/3/1 and finally 2/2/2/2/2 elements on each row. It “fails” to fulfill when are shown 6, 4 and 3 items per row

Example 3:
5 products per row
While I shrink the window, I will see 5, then 4, then 3 and finally 2 products per row
If I set 10 products I will get 5/5, 4/4/2, 3/3/3/1 and finally 2/2/2/2/2 elements on each row. It “fails” to fulfill when are shown 6, 4 and 3 items per row

Conclusion
The flex shrink is producing and “non-complete” row for some cases. We can take control on that and decide how shrink works. In my case, when I shrink, I would like to jump from 6 to 4, so I will see 6, 4, 3 and 2 products per row depending on my device width, and I will see complete rows on all cases.

Fred 24 Mar 2020, 11:37

First of all I would not say that is a theme’s problem. Check out any other theme and you will see the same behaviour.
Second, I have no idea how to achieve that. It requires code customisation.
I can advise you to check CSS Grid, for example here https://mozilladevelopers.github.io/playground/css-grid and try to adjust your layout as you like