#42188 closed defect (bug) (fixed)
Gallery Widget: Spacing between rows incorrect in Firefox
Reported by: | melchoyce | Owned by: | melchoyce |
---|---|---|---|
Milestone: | 4.9 | Priority: | normal |
Severity: | normal | Version: | |
Component: | Widgets | Keywords: | has-patch commit |
Focuses: | ui | Cc: |
Description
This is a continuation of the discussion started in #42101.
In Firefox, there is no spacing between rows in the Gallery widget. We want to add even spacing, without increasing the spacing in other browsers. A CSS expert would be great for this one :)
For more context, see this Slack conversation: https://wordpress.slack.com/archives/C02RQBWTW/p1507750029000162
Also see attached screenshots for what it currently looks like in Firefox, and what it should ideally look like.
Attachments (3)
Change History (7)
#1
@
7 years ago
- Keywords has-patch added; needs-patch removed
Hello! It would appear that browsers have some flexibility in how they want to implement percentage padding/margins on Flex elements. See: https://drafts.csswg.org/css-flexbox/#item-margins
The spacing issue is resolved by removing the padding from .gallery-item and adding the space to the child element .gallery-icon by way of a margin.
Looks good in Chrome, Safari, IE and Firefox but may need more testing.
Happy to make any modifications if required.
#3
@
7 years ago
- Owner set to melchoyce
- Resolution set to fixed
- Status changed from new to closed
In 41834:
patch fixes the spacing issue on flex elements in Firefox