Responsive Design – All Devices Welcome

Responsive design in Boilerplate is treated as a first-class part of the theme, not a final cleanup pass after the desktop layout is finished.

A WordPress site has to work everywhere: on a phone, on a tablet, on a laptop, on a desktop monitor, inside the block editor, while logged in, while logged out, with the admin bar visible, and with unpredictable content coming from plugins, editors, widgets, images, embeds, comments, and archives.

Boilerplate’s responsive system exists to make those cases feel intentional instead of patched together.

Mobile is part of the layout system

The left and right asides are not simply hidden on smaller screens. They become mobile fly-out panels controlled by checkbox-driven toggles, with JavaScript support in assets/js/theme.js to keep the state clean.

When an aside opens, Boilerplate adds a backdrop override state to the body. When the user clicks the backdrop, the aside closes. If both left and right asides exist, the theme ensures only one is active at a time, preventing the mobile layout from getting into a broken double-panel state.

The navbar adapts too

The sticky navbar is designed to preserve screen space on smaller devices. It hides when scrolling down, reappears when scrolling up, and avoids hiding while Bootstrap dropdowns are expanded.

This behavior lives in assets/js/theme.js, alongside the admin-bar and hash-navigation compensation. The point is practical: fixed UI should not cover the content the user was trying to reach.

That matters especially in WordPress, where logged-in users may have the admin bar, editors may jump to comment anchors, and normal visitors may arrive through deep links to headings or sections.

Breakpoints are allowed to be contextual

Boilerplate does not treat responsive design as one global breakpoint list that every component has to obey blindly.

There are global responsive concepts, but many layout decisions are component-specific. Sidebars, navbars, comments, images, typography, widgets, and content regions may need different thresholds because they solve different problems. A comment layout does not necessarily need to collapse at the same moment as a floated image or a navbar menu.

That flexibility keeps the theme practical. Components respond when their own layout starts to fail, not just when a generic device width says they should.

Typography scales with the system

Responsive typography is part of the foundation. Boilerplate uses theme variables, Bootstrap font defaults, and a rhythm-unit system to keep type size, line height, margins, and spacing feeling consistent across screen sizes.

The goal is readability. Headings should not overwhelm small screens. Paragraphs should not feel cramped. Layout spacing should compress intelligently without destroying the visual rhythm of the page.

That is why the theme invests in baseline/rhythm values instead of relying entirely on scattered one-off margins.

WordPress image alignment needs guardrails

WordPress gives editors useful image alignment controls, but those controls can create awkward mobile layouts if the theme does not help.

Boilerplate handles this in assets/sass/parent_theme/images.scss. Floated left and right images keep sane spacing on wider screens, but their maximum widths are constrained and eventually reset on very small screens so images can stack cleanly instead of squeezing text into unreadable columns.

This is a good example of the theme’s responsive philosophy: preserve WordPress behavior, but add enough structure that editor-driven content remains readable on real devices.

Comments and anchors need special handling

Responsive polish is not only visual. It also affects movement around the page.

assets/js/wordpress.js handles comment-related behavior, including inline reply forms and direct jumps to comment anchors or moderation messages. It also accounts for the WordPress admin bar so the browser does not scroll the target underneath fixed interface elements.

That kind of detail is easy to miss until real users hit it. Boilerplate keeps it in the parent theme so every project benefits from the same fix.