- 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
Don’t you want to display 10 products instead of 12?
You can also try the following CSS:
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.
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