Skip to content

v9.0.0

Choose a tag to compare

View all tags
@I-HiMo-I I-HiMo-I released this 09 Aug 11:45
v9.0.0
cb57b74

v9.0.0 — 2026-07-02

Major release — full responsive overhaul (phone, tablet, desktop)

Root cause of the oversized mobile search box

The search input used flex: 1 1 280px for its desktop width. flex-basis always applies along the main axis — on desktop that's horizontal (row), so 280px set the width. But .rhg-exh-controls switches to flex-direction: column on mobile, which flips the main axis to vertical — so that same 280px was being applied as height instead, making the search box enormous. Fixed by explicitly resetting the field to width:100%; height:46px; inside the mobile breakpoint instead of letting the desktop rule bleed through.

Category filter — mobile dropdown (same mechanism as desktop)

  • Added a "Categories ▾" toggle button, shown only on phones (≤600px)
  • Tapping it reveals the exact same category pill list used on desktop, just re-styled as a vertical scrollable dropdown instead of a wrapped inline row
  • Every pill still uses the identical click handler and multi-select logic as desktop — selecting/deselecting categories works exactly the same way everywhere, only the layout changes
  • Toggle button shows a live count of selected categories, e.g. "Categories (3)"
  • Dropdown closes automatically when tapping outside it

New responsive breakpoints (used consistently throughout)

  • Desktop (>1024px): 4-column grid, inline category pills, search + per-page side by side
  • Tablet (601–1024px): 3-column grid (2-column below 768px), tightened spacing
  • Phone (≤600px): 1–2 column grid, stacked full-width search/select fields, category dropdown, larger touch targets (40px pagination buttons, bigger combo-dropdown rows), reduced modal/card padding
  • Extra-small phones (≤360px): further-reduced card image height for very narrow screens

Fixed: hover-to-reveal cards were unreachable on touch devices

The card's description/Register button only appeared on :hover — but touchscreens have no real hover state, meaning phone and tablet users could never see or reach that content. Added JavaScript hover-capability detection (matchMedia('(hover: hover)')); on touch devices, tapping a card now toggles its overlay open (accordion-style — opening one closes any other), while desktop mouse behaviour is unchanged. Tapping outside a card, or tapping the Register button itself, closes/opens correctly without conflicting.

Other responsive fixes

  • All form inputs, modal, and success popup verified to scale fluidly down to 320px-wide screens (percentage-based widths, no fixed-pixel overflow)
  • Combo dropdown (Country/Town/Job Title) touch targets enlarged on phone
  • General box-sizing safety net added (* { box-sizing: border-box } scoped to the plugin wrapper) to prevent any width-overflow surprises from padding/border math
Assets 3
Loading