Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Try a simpler spacing setup for gallery items #10027
The stock gallery features white gutters between items. Currently in
This PR attempts a different approach. It sets only the right and bottom margin on gallery items, and then unsets the right margin on the rightmost item in each row.
This is a little more complex in the rules that are output, but it solves the issue presented here: #9670 (comment)
Let me know your thoughts. The columns markup itself is a little more complex, but the gallery itself is easier to style for themes, as it no longer uses negative margins.
If we like this, we'll need to test for IE as well.
By the way I noticed this:
It looks like when the gallery block has no alignment, an "alignundefined" is applied.
It looks like a lot of the CSS here needs to be removed rather than commented, but I tested things in IE 11 and they seemed okay.
I couldn't reproduce the
alignundefined class, but that seems a separate issue anyway… if you can reproduce it consistently please do file a bug and I'll take a look, it'd think the fix would be straightforward.
Completely agree that's separate. I can reproduce it consistently though, it's only in the editor, and it appears to be benign, so it's not saved for the post itself:
I like this approach too. Just a couple issues I've noticed during testing:
When things drop to two columns on mobile, it looks like every second row's right margin is missing:
Guys, it was just a mathematical question. First subtract the margins total, then divide by the number of columns.
Still think math is not totally correct:
is not the same of
With a practical example, assuming 100% is 580px:
Now, the columns width only looks right because of the
The width of a column is the total width less the total of margin between columns divide by the number of columns.
When colunms = 2
When colunms = 3
So my solution would be something like this:
referenced this pull request
Sep 24, 2018
Very odd! I'm still seeing the error. It doesn't seem like a caching bug, since it's happening in every browser I try — even after changing themes and creating brand new galleries. Here's what I'm doing:
Those screenshots are in Safari 12.0 (using the Twenty Seventeen theme), but I'm seeing the same in Chrome + FF, too.
I still can't reproduce. Tried Safari, tried Twenty Seventeen. This is so weird.
It's sort of a nuclear way to delete the branch, pull it fresh and try it again. My only thought is you have some cache ghost or an old version of the branch.
This is chrome but the same happens on safari or firefox. And it happens because of this rule:
Haha, sorry — It seemed to work for me in mobile in quick testing, but I've now tested with additional configurations and breakpoints. Added your revised rule. Thank you. Good for final round of testing?