Orbital Surveys

CloudCanvas Equal Gallery Design

CloudCanvas Equal Gallery Design

Goal

Replace the staggered CloudCanvas image composition with two balanced cards of the same width and height, aligned side by side on wider screens.

Approved layout

  • Use two equal-width columns from the existing tablet breakpoint upward.
  • Give both image cards the same aspect ratio so their outer dimensions match.
  • Align both cards to the same top and bottom edge with no vertical offset.
  • Keep the existing images, captions, border treatment and surrounding copy unchanged.
  • Below the two-column breakpoint, stack the cards at full width with the existing spacing.

Alternatives considered

  1. Equal columns with a shared aspect ratio — selected because it directly matches the requested balanced layout and remains responsive.
  2. Fixed-height image cards — rejected because a fixed pixel height would be less adaptable across viewport sizes.
  3. Equal-width cards with natural image ratios — rejected because the card heights would still differ.

Verification

Check the rendered gallery at 320px, 768px, 1024px and 1362px. At wider sizes, the two card rectangles must have matching width, height and vertical position. At 320px, they must stack without overflow. The Jekyll build and existing modern-site verification must continue to pass.