Responsive Markup for a 1C-Bitrix Site Template

The markup developer delivered the template — everything looks great on desktop. Open it on an iPhone 13 and the header with the logo overlaps the menu, the catalog filter extends beyond the screen edge, and the "Buy" button hides behind a sticky banner. This is not a markup bug in isolation — it is the result of building responsiveness without accounting for the specifics of the Bitrix template system: nested components loaded via $APPLICATION->IncludeComponent(), and the fact that part of the HTML is generated by PHP and part by JavaScript.

Responsive Markup for a 1C-Bitrix Site Template

How a Bitrix Template is Structured from a Markup Perspective

A Bitrix site template is a folder at /bitrix/templates/<template_name>/ or /local/templates/<template_name>/. Entry points: header.php, footer.php, styles.css, script.js. Components are overridden in /bitrix/templates/<template>/components/ or /local/templates/<template>/components/.

Responsive work happens at two levels:

• Site template (header.php, footer.php, shared blocks): navigation, header, footer, sidebar
• Component templates: bitrix:catalog.section, bitrix:news.list, bitrix:sale.basket.basket each have their own markup in template.php — these must also be made responsive

The most common mistake is making only the site template responsive while ignoring component templates. The result: a fluid header, but product cards still laid out in a fixed-width table.

Responsive Approaches

Mobile-first — write styles for mobile screens, then expand using min-width media queries. Preferred for new templates: fewer overrides, cleaner cascade.

Desktop-first — add media queries using max-width. Appropriate when adapting an existing desktop template: lower risk of breaking the current layout.

Breakpoints are agreed upon with the design, but a typical set for Bitrix projects: 1280px, 1024px, 768px, 480px, 375px.

Key Responsive Zones

Mobile menu — the bitrix:menu component generates a <ul> with classes. For a mobile burger menu, either override the component template or control visibility via CSS/JS. Accessibility must be preserved: the menu should work without JavaScript when SSR caching is active.

Catalog and filter — bitrix:catalog.section combined with bitrix:catalog.smart.filter requires a dedicated mobile approach: the filter moves into an overlay or accordion, and the product grid switches from 3 columns to 2 and then 1.

Forms — bitrix:form.result.new and checkout forms (bitrix:sale.order.ajax) often have multi-column layouts that need to be restructured into a single column.

Data tables — price lists, product specifications: on mobile, replaced with a stacked layout or horizontal scroll with a fixed first column.

Case Study: Responsive Adaptation of a Corporate Site

A construction company site, the template written in 2019 with no responsive design. Mobile traffic share per Metrica: 58%. Task: full responsive adaptation without redesigning or rewriting PHP logic.

We went through all pages and compiled a list of components and blocks with issues. The bulk of the work focused on: the homepage (banner + service blocks), the catalog (filter + grid), and the contacts page (Yandex Maps + form). In parallel, we overrode three component templates in /local/templates/. The work took 5 to 8 business days.

Responsive Testing

Testing in Chrome DevTools (device toolbar) is the minimum. Additionally: real devices or BrowserStack, touch event testing, verification of Bitrix cached pages (important: Bitrix caches HTML — ensure adaptive scripts are not incorrectly captured in the cache).

Timeline