Skip to content

chore: Resolve layout shift on page navigation

What does this MR do?

  1. Resolve layout shift on page navigation
  2. Move <footer> outside of <main> as per spec
  3. Resolve mobile width causing overflow scroll on x-asis to satisfy WCAG 1.4.10: Reflow

Changes

  • Move <footer> outside of <main>
  • Remove .content CSS class, consolidate .main style to own selector
  • Create .container CSS class
  • Remove conditional classes in default layout <main> element
  • Remove excessive spacing from gl-pt-xx classes in page templates

Closes #1457 (closed)

Screenshots

Description Before After
Layout shift before after
Desktop spacing desktop-before desktop-after
Mobile 1 mobile-1-before mobile-1-after
Mobile 2 mobile-2-before mobile-2-after
Edited by Scott de Jonge

Merge request reports