Treat breakpoint changes as a generated-asset change with a multi-template verification scope.
Save the breakpoint baseline
Record the configured breakpoints, CSS loading mode and affected viewport widths. On staging, compare the builder canvas with the published page at exactly the same width. A difference caused by testing opposite sides of a breakpoint is not a cache failure. Include one width just below and one just above the changed threshold.
Inspect the winning responsive rule
Select the misaligned element and inspect its applied styles. Record the media condition, source stylesheet and any overriding rule. Verify whether the published CSS actually includes the new threshold. If it does, investigate selector order or a conflicting declaration rather than regenerating files again. Keep custom overrides in the comparison.
Regenerate through the builder owner
For external CSS mode, use Bricks’ documented regeneration control after relevant configuration changes. Check the required generated files exist and are delivered successfully. Preserve the previous configuration and content revision. Do not assume an old tutorial’s settings labels match the current release, or switch loading mode across the live site just to test one page.
Review references and cache scope
Compare the published document’s stylesheet references with the generated assets. If the document points to outdated output, investigate the relevant HTML cache. A global breakpoint change can affect multiple templates, so define the verification set before invalidation. Coordinate generated CSS and any optimization-derived CSS through their supported tools.
Retest representative layouts
Check header navigation, columns, galleries and forms around the threshold. Include a page with long text and a second template. Verify guest delivery after a repeat load and restore the old breakpoint if important controls overlap. Document the configuration, regenerated output and tested widths so a later design change has a reproducible baseline.
Symptom-to-cause worksheet
| What you observe | What to investigate | Next check |
|---|---|---|
| Rule still contains old threshold | Generated CSS not current | Regenerate through supported Bricks control |
| Rule new but overridden | Cascade or custom styling issue | Inspect winning declaration |
| Builder differs only near threshold | Viewport or breakpoint mismatch | Measure exact viewport widths |
Worked investigation scenario
Illustrative investigation, not a measured Velonic result. Suppose a tablet breakpoint changes but the guest stylesheet still contains the earlier media condition. Regenerate the supported external output and verify the resulting rule directly. Then inspect a navigation template and a content template on both sides of the threshold. If only navigation remains wrong with current CSS, investigate its overrides rather than attributing every discrepancy to stale files.
Put it into practice
- Compare exact widths around the breakpoint.
- Verify generated rules before purging.
- Include global templates in the regression set.
AI-assisted educational content prepared for the Velonic resource library. How these guides are prepared.