Hello, I have 4 products selected per row and I only get 3, how can I fix it so that it fits in its place?
https://jaccomcollection.com/collections/t-shirt
Thank you so much
Topic summary
Issue: Collection page configured for 4 products per row only rendered 3 on desktop.
Desktop fix provided: Add a CSS rule in base.css with a desktop media query (min-width: 990px) to set .grid–4-col-desktop .grid__item to max-width: calc(25% - var(–grid-desktop-horizontal-spacing)*12) !important. Reported to display 4 items per row after saving.
Follow-up problem: On mobile, the layout appeared incorrect after the desktop change (screenshot shared).
Additional suggestions: One reply advised adding code in theme.liquid before , but the actual code snippet was missing in the post; a screenshot showed an expected result.
Mobile fix from original helper: Add a CSS rule in base.css with a mobile media query (max-width: 768px) to set .grid–2-col-tablet-down .grid__item to width: calc(47% - var(–grid-mobile-horizontal-spacing)/2) !important.
Status: Desktop display issue appears resolved; a specific mobile CSS fix was proposed. Awaiting confirmation from the original poster on whether the mobile layout is fully corrected.
1 Like
Hi @ArnauP ,
I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!
Step 1: Go to Admin → Online store → Theme > Edit code:
Step 2: Search for the file base.css. And add this code snippet to the end of the file.
@media screen and (min-width: 990px) {
.grid--4-col-desktop .grid__item {
max-width: calc(25% - var(--grid-desktop-horizontal-spacing)* 12) !important;
}
}
Step 3: Save and reload home page.
=>> The result:
I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.
Have a nice day sir!
1 Like
- Here is the solution for you @ArnauP
- Please follow these steps:
- Then find the theme.liqid file.
- Then add the following code at the before tag and press ‘Save’ to save it.
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
Hi @ArnauP ,
We’re happy to see that our suggestion helped you solve the issue.
Sr about my mistake on mobile.
You can add more css script in base.css, like below to fix this problem:
@media screen and (max-width: 768px) {
.grid--2-col-tablet-down .grid__item {
width: calc(47% - var(--grid-mobile-horizontal-spacing) / 2) !important;
}
}
Hope it helps.
It’s such my honor to help you, bro.