One thing that has always bugged me from a UI perspective with WordPress is the float:left
of the draggable widgets on the Appearance > Widgets page: If widget descriptions differ in length in a row of widgets, the floats will get ugly like this:
What we need is to do is force a clear:left
on the first widget in every row. With a little media query action I was able to tweak the flow so the rows flow nicely together:
@media (min-width:1332px){ #widget-list .widget:nth-child(3n+1){clear:left;} } @media (min-width:1077px and max-width:1331px){ #widget-list .widget:nth-child(2n+1){clear:left;} }
By no means is this anywhere near robust. I didn’t take the time to calculate it when the sidebar is collapsed and there is also an exception when WP manually hides a widget with display:none
(e.g., search, when it’s already used), which throws off the nth-child
increment. In an ideal world, there would be classes for all visible widgets so they could be targeted with nth-of-type
.