In-depth practical guides

Diagnose inconsistent responsive layouts

Review headings, columns, spacing and photographs against reading tasks: a testing method for wide screens, smartphones and every language.

Updated :

Keyboard keys carrying multiple character sets.

Keyboard keys carrying multiple character sets. Documentary context photograph; it does not depict an Alexis Roux ZG assignment or equipment. © Alexander-design · Source · CC0. Resized and converted to WebP; cropped display.

Where does the layout prevent reading or acting?

The absence of overflow does not guarantee a balanced composition. Huge headings, three cards squeezed into four columns or an overwhelming photograph may obscure useful information. Link each defect to its responsible CSS rule, correct the component and retest every page sharing it. Suggested widths form a working matrix, not a universal standard.

  1. Build the matrix

    Include home, section, long profile, results, form and tool. Try 320, 390, 768, 1024, 1440 and 1920 CSS pixels, then resize gradually between them. Add the longest headings and every script: a defect between breakpoints may escape familiar device screenshots.

  2. Inspect the cascade

    Record computed font size, line height, width, padding, margins and minimum height in browser tools. Identify the winning rule and specificity. A global h2 correction may leave a more specific selector unchanged. Review the affected component’s variants.

  3. Restore reading hierarchy

    Compare heading, introduction, subheadings and card text. Check wrapping and placement of the action. Bound sizes and adapt line height to the writing system. Remove fixed heights that leave empty space with short text or clip a longer translation.

  4. Test columns

    Inspect sets of three, four and five cards with real content. Switch to one column before paragraphs become cramped. Test long URLs and fields. Keep explicit local scrolling for tables requiring two dimensions.

  5. Check photographs

    Measure the box and aspect ratio, then currentSrc and transferred bytes. sizes should describe the occupied slot: half a page is not the full viewport. Check cropping of the subject, reserved dimensions and lazy loading below the fold.

  6. Retest zoom and interactions

    Test reading at 200% and reflow at 400% zoom on a suitable screen. Navigate menus, FAQs and fields by keyboard. Inspect visible focus and logical order. In Arabic, examine alignment, directional icons and Latin strings. Record results by URL, language and width.

Situations and decisions

Typical situations for preparing a check. They do not describe completed assignments or actual observations.

A huge desktop photograph

A 720 px minimum height creates an almost full-screen scene. Bound the container and compare a two-column photograph/text layout. Review sizes and mobile cropping: file compression alone does not fix composition.

Three cards in four columns

The fourth track remains empty and paragraphs are narrow. Fit the grid to content, then retest three, four and five items with the longest Russian and Finnish headings.

A visually correct form

A fixed banner can hide focus, or an error may appear far from its field. Test failure and recovery by keyboard. Good alignment does not establish that the action can be completed.

Record to retain

  • URL, language, CSS width, zoom, browser and panel state.
  • Defect screenshot and responsible computed rules.
  • Comparable screenshot after correction and action result.
  • Templates and translations retested; remaining defects separated from validated corrections.

Official references

Related protocols

Checks before reaching a conclusion

  • Do a filtered card, a long translated heading and an invalid form preserve consistent columns and spacing?
  • Does the photo file actually selected by the browser suit its displayed width without needlessly loading the largest variant?
  • Can users read and act using zoom and keyboard navigation without text hidden beneath a fixed element?

Frequently asked questions

A breakpoint for every phone?

Choose points when the content stops working. Device models extend the matrix without justifying arbitrary rule proliferation.

Is 16 px always enough?

No. Typeface, contrast, line height, line length and zoom matter together. Test actual text and its readers.

Can a block be hidden on mobile?

Only if necessary information remains available. Reorganising a comparison or form is often preferable to removing explanations.

Why every language?

Lengths, scripts, wrapping and direction differ. A French template may break with a Finnish heading or a Latin address inside Arabic text.