The Challenge
Working within HubSpot requires navigating its HubL templating engine, which often generates rigid DOM structures. The design required a complex, dual-branch timeline that merged at a specific point. Relying solely on standard CSS Grid or Flexbox resulted in layout breakage when content editors inputted text of varying lengths, and it failed to handle the structural reflow required for smaller mobile viewports.
The Solution
To deliver a resilient component, I bypassed the limitations of the native CMS layout tools. I used CSS for the foundational typography and styling, but implemented a targeted JavaScript layer to manage the responsive behavior and structural DOM manipulation. This script dynamically calculated element positioning and handled the complex reflow logic necessary to collapse the dual-column desktop view into a chronological mobile layout. The result was a pixel-perfect, mobile-responsive component that gave non-technical users full autonomy over content updates without risking layout regression.