Repository navigation
Fix product grids with 2, 4, 5 or 6 columns dropping a column - #36
Merged
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
assets/css/woocommerce.cssreplaces the gap onwoocommerce/product-templateand rewrites the grid track formula to match, but only forcolumns-3(the comment says it is the only variant the theme's own templates use). Every othercolumns-Nkeeps WooCommerce's formula, which assumes WooCommerce's own 20px gap. With the theme's wider gap each track comes out wider than 1/N of the row andauto-fillfits one column fewer.Found while building store sections for Aludra: a product collection set to four columns with four products rendered 3 + 1.
Fix
Add the matching rule for
columns-2,-4,-5and-6, same shape as the existingcolumns-3rule. N columns share N - 1 gaps, so each track gives up (N - 1) / N of one gap. The 150px floor is the block's own and still folds the grid to two columns on a phone. The theme's templates are all three-column and are unaffected. Version 1.18.4.Testing
On the Aviendha demo subsite with a four-product collection at
columns-4:/shop/archive (three columns): unchanged.CSS only; no templates or patterns changed.