Inicio - Documentación - POM Theme - 04 Layout - Review responsive layout behavior

Review responsive layout behavior

Use this checklist after the header, subheader, template layout, sidebars, footer, and floating controls are configured. The goal is to verify the complete frame at real content lengths, not only an empty demonstration page.

Prepare representative URLs

Include:

  • A standard page with several Page Builder rows
  • A long single post
  • A blog or custom post type archive
  • A search result
  • A page with a sidebar
  • A WooCommerce archive and product when applicable
  • A page containing the longest navigation labels and footer content

Test signed out and signed in when the header has login-specific output.

Desktop review

  • The logo, primary navigation, login area, and optional bars do not collide.
  • Header, subheader, content, sidebar, and footer inner edges align intentionally.
  • Transparent navigation remains legible over the first content area.
  • Sticky and auto-hide transitions work in both scroll directions.
  • Dropdown menus remain inside the viewport.
  • Sidebars use the selected side and sticky content does not trap access to lower widgets.
  • Footer row widths form the intended grid.

Tablet review

  • Header content does not wrap into an unintended intermediate state.
  • The mobile navigation trigger appears when expected.
  • Subheader titles and breadcrumb trails wrap without clipping.
  • Builder rows and template sidebars do not create horizontal scrolling.
  • Footer columns remain readable before they stack.
  • Floating controls remain separated from one another.

Mobile review

  • The mobile panel opens from the configured side and can be closed.
  • Mobile and Mobile 2 show the correct menus and titles.
  • The dedicated mobile subheader image has a useful crop.
  • Breadcrumbs remain readable and do not dominate the screen.
  • Sidebar widgets follow the main content in a sensible order.
  • Footer columns use the configured mobile width.
  • The contact dock, go-to-top arrow, and secondary icon do not cover links, forms, or consent controls.

Interaction and accessibility review

Complete the main journey with a keyboard. Confirm visible focus, operable menu sublevels, readable current states, descriptive labels for icon-only actions, and sufficient contrast in normal, hover, and transparent states.

Also test:

  1. Browser zoom at 200%.
  2. Long translated labels where the site is multilingual.
  3. An authenticated session with the admin bar visible.
  4. A slow-loading background image so text remains understandable.

Record the result

For each viewport, note the URL, browser width, account state, and any intentional exception. A layout is ready only when the exception is explained by the correct scope—global frame, content template, or Page Builder composition—and not by an accidental local workaround.