Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#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:


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)

currently-in-firefox.png (314.3 KB) - added by melchoyce 4 years ago.
should-look-like.png (308.1 KB) - added by melchoyce 4 years ago.
42188.patch (391 bytes) - added by petertoi 4 years ago.
patch fixes the spacing issue on flex elements in Firefox

Download all attachments as: .zip

Change History (7)

4 years ago

patch fixes the spacing issue on flex elements in Firefox

#1 @petertoi
4 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.

Last edited 4 years ago by petertoi (previous) (diff)

#2 @melchoyce
4 years ago

  • Keywords commit added

Looks great! Thanks @petertoi :)

#3 @melchoyce
4 years ago

  • Owner set to melchoyce
  • Resolution set to fixed
  • Status changed from new to closed

In 41834:

Gallery Widget: Fix row spacing across major browsers.

Props petertoi .
Fixes #42188.

This ticket was mentioned in Slack in #core by petertoi. View the logs.

4 years ago

Note: See TracTickets for help on using tickets.