![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
#42188 closed defect (bug) (fixed)
Gallery Widget: Spacing between rows incorrect in Firefox
| Reported by: | melchoyce | Owned by: | melchoyce |
|---|---|---|---|
| Priority: | normal | Milestone: | 4.9 |
| Component: | Widgets | Version: | |
| Severity: | normal | Keywords: | has-patch commit |
| Cc: | Focuses: | ui |
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
@
9 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, Edge and Firefox but may need more testing.
Happy to make any modifications if required.
patch fixes the spacing issue on flex elements in Firefox