A user is experiencing layout issues on their collection page where they’ve added 1px borders (right and bottom) to product cards. When collections don’t have enough products to fill all grid positions, empty spaces appear that disrupt the border pattern.
Desired outcome: Fill empty grid spaces with blank placeholder elements to maintain consistent border appearance.
Solution provided: A PageFly support representative offered CSS code to be added to the theme.liquid file, which initially resolved the issue.
New problem: The fix created an unintended side effect—collections with maximum products now display an extra border. The support representative has requested the code’s location to troubleshoot this secondary issue.
Status: Partially resolved, awaiting further debugging to eliminate the extra border on full collections.
Hello, as you can see in the image, I put a 1px border-right and a 1px border-bottom on the product cards so that they have this shape, however when I don’t have a fair amount of products in a collection, ugly holes appear that I would like to fill as if there was a blank product to put it in some way
Something like this:
Web: https://centralmrkt.myshopify.com
Code: 90210
Hi @davidvilaa ,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: Paste the below code at the bottom of the file → Save
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly
It worked, however the pages that have the maximum number of products added an extra border. Any mode to solve it?
can you share your position added code so I can check it?
