[Developers Live] Fix Event Banner Mobile Layout and Create New Event CTA Block
- 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
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