Small CSS bug with listing rating margin

Bug Reports
,
1

Hi,

I noticed a small CSS issue in the ExpertHive theme with the listing blocks.

When I change the display order of the rating element, a margin-bottom rule is automatically applied to it. As a result, the height of the entire listing details block changes, which causes the elements to be misaligned.

And the same will happend if you add your own custom block inside of the hp-listing__details block (but not as a last child).

I’ve attached an image showing the issue.

image
image2558×1210 349 KB

2

Hey @alokhinDev,

I asked AI to try and verify the bug and it seems to have found the cause/fix:

This one is legitimate — and I can point at the exact rule, though with a caveat: ExpertHive isn’t installed here, so I verified against ListingHive, which is built on the same HiveTheme base. The values may differ slightly in ExpertHive; the mechanism won’t.

The rule, frontend.less, compiling to:

.hp-listing--view-block .hp-listing__created-date:not(:last-child),
.hp-listing--view-block .hp-listing__location:not(:last-child),
.hp-listing--view-block .hp-listing__rating:not(:last-child){margin-bottom:.5rem}

Why the default order hides it. listing_rating is registered by the reviews extension as a child of listing_details_primary at _order => 30 (class-review.php), while its siblings sit at 10 and 20. So out of the box the rating is the last child and the rule never fires. Reorder it — or insert any block after it — and it becomes non-last, picks up margin-bottom: .5rem, and the block grows. Both scenarios the reporter describes are real.

The actual defect is an inconsistency inside HiveTheme itself. Everywhere else the stylesheet handles wrapping-row gutters with the negative-margin idiom — .hp-post__details at frontend.less sets margin-bottom: -.75rem on the container and .75rem on every child, so the trailing space cancels regardless of child count or order. .hp-listing__details never got that treatment; it uses positional :not(:last-child) instead. That’s why it’s order-fragile where the others aren’t.

The reporter’s generalization holds too: any custom block added to hp-listing__details that isn’t last will trip the same thing, and it isn’t limited to rating — __location and __created-date are in the same selector list.

A container-level fix is the clean one (negative margin on .hp-listing__details, flat margin on children), but that’s HiveTheme’s call. For their own site the workaround is a one-liner overriding margin-bottom to 0 on whichever element they moved out of last position.

I hope this helps! :slight_smile:

Cheers,
Chris :victory_hand:

5

Hi,

Thanks for reporting this! We’ve added the issue to our tracker, and we’ll fix it in the next update.

1 Like