feat: mobile-specific hero height #55

Closed
opened 2026-06-04 12:06:17 +00:00 by jmiller · 1 comment
Owner

Summary

Add a separate height setting for mobile viewports. Currently the hero uses a single heroHeight value and switches to height: auto on mobile via CSS.

Requirements

  • New heroHeightMobile text field with the same validation as heroHeight
  • Default to empty (keeps current auto behaviour for backwards compatibility)
  • Apply via a <style> block or inline CSS variable with a media query
  • Same CSS injection validation regex as heroHeight
  • Remove the height: auto !important override when a mobile height is explicitly set

Acceptance Criteria

  • Mobile height can be set independently (e.g., 40vh on mobile, 60vh on desktop)
  • Empty value preserves current auto behaviour
  • CSS injection validation applied
  • Background modes still display correctly at the mobile height
## Summary Add a separate height setting for mobile viewports. Currently the hero uses a single `heroHeight` value and switches to `height: auto` on mobile via CSS. ## Requirements - New `heroHeightMobile` text field with the same validation as `heroHeight` - Default to empty (keeps current `auto` behaviour for backwards compatibility) - Apply via a `<style>` block or inline CSS variable with a media query - Same CSS injection validation regex as `heroHeight` - Remove the `height: auto !important` override when a mobile height is explicitly set ## Acceptance Criteria - [ ] Mobile height can be set independently (e.g., 40vh on mobile, 60vh on desktop) - [ ] Empty value preserves current auto behaviour - [ ] CSS injection validation applied - [ ] Background modes still display correctly at the mobile height
jmiller added the cssenhancementjoomla labels 2026-06-04 12:06:17 +00:00
Author
Owner

Branch created: feature/55-feat-mobile-specific-hero-height

git fetch origin
git checkout feature/55-feat-mobile-specific-hero-height
Branch created: [`feature/55-feat-mobile-specific-hero-height`](https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero/src/branch/feature/55-feat-mobile-specific-hero-height) ```bash git fetch origin git checkout feature/55-feat-mobile-specific-hero-height ```
Sign in to join this conversation.
No labels css enhancement joomla
Type
Status
Priority
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: MokoConsulting/MokoJoomHero#55