adobe / adobe/helix-website

[Developers Live] Fix Event Banner Mobile Layout and Create New Event CTA Block

Open
#875 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
45
Forks
59
Avg merge
3d 7h
Merged PRs (30d)
12

Description

## Summary
Resolved critical mobile layout issues with the event-banner block where the header content was completely misaligned with the background image, and created a new standalone event-cta block to replace embedded CTA functionality.

## Initial Problem
- **Mobile Header Completely Broken**: Poor spacing and alignment between text content and background image on mobile devices
- **Adobe Logo Positioning**: Logo was positioned too high and getting cut off by the red rectangle area
- **Content Misalignment**: Text elements not properly positioned within the dark background area
- **Embedded CTA Limitation**: CTA functionality was embedded in event-banner, preventing reuse at bottom of page

## Issues Fixed

### Event Banner Block
- **Mobile Layout Restoration**: Fixed completely broken mobile header layout with proper content positioning
- **Background Image Alignment**: Resolved severe misalignment between text content and background graphic
- **Desktop Proportions**: Fixed banner height from 600px to 472px to achieve proper 1200x472 aspect ratio
- **Background Scaling**: Implemented proper `background-size: cover` scaling to prevent image distortion
- **Content Positioning**: Moved content to proper position within dark background area
- **Typography**: Increased subtitle font size to 22px on desktop for better readability

### Event CTA Block (New Block Creation)
- **New Standalone Block**: Created completely new event-cta block with full functionality
- **Reusable Component**: Can be used independently anywhere on pages (especially bottom of page)
- **Mobile Typography**: Optimized text sizing (18px tablet, 16px mobile)
- **Compact Spacing**: Proper vertical spacing with reduced bottom padding
- **UTM Tracking**: Includes UTM parameter handling for analytics
- **Consistent Styling**: Maintains visual consistency with event-banner design

## Technical Changes

### Files Created/Modified
- `blocks/event-banner/event-banner.css` - Fixed mobile layout and desktop proportions
- `blocks/event-cta/event-cta.css` - **NEW FILE** - Complete styling for standalone CTA block
- `blocks/event-cta/event-cta.js` - **NEW FILE** - Block functionality including UTM tracking

### Key Features of New Event CTA Block
- **Responsive Design**: Mobile-optimized typography and spacing
- **UTM Parameter Handling**: Automatic UTM tracking for analytics
- **Flexible Content**: Supports tagline text and CTA button
- **Clean Layout**: Flexbox-based layout with proper gap management
- **Button Styling**: Consistent with event-banner button design

## Before/After
- **Before**: Mobile header was completely broken with misaligned content, CTA embedded in banner
- **After**: Proper mobile layout + new reusable CTA block for flexible page placement

## Testing
- ✅ Mobile layout completely restored and functional
- ✅ Desktop proportions match design specifications
- ✅ Background image properly aligned with content on all devices
- ✅ New event-cta block works independently throughout site
- ✅ UTM tracking functionality working correctly
- ✅ All responsive breakpoints properly handled

## Branch
`devlive-blocks`

## Impact
- Restored completely broken mobile experience
- Created new reusable component for site-wide CTA usage
- Improved code architecture with separation of concerns
- Enhanced analytics tracking capabilities

Contributor guide

Open the contributing guide

Research direction

Start with blocks/event-banner/event-banner.css and compare its mobile and desktop layout against the stated 1200x472 proportions and responsive behavior. Then inspect the new blocks/event-cta/event-cta.css and blocks/event-cta/event-cta.js; done means the standalone CTA renders responsively, supports the listed content and button styling, and preserves UTM tracking.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.