A client recently approached us with a common issue: a layout developer delivered a template — everything looked great on desktop. But when you opened it on an iPhone 13, the header with the logo overlapped the menu, the catalog filter extended beyond the screen, and the 'Buy' button was hidden under a sticky banner. This isn't a layout bug in a vacuum — it's a consequence of adapting without considering the specifics of the Bitrix template system: nested components included via $APPLICATION->IncludeComponent(), and the fact that part of the HTML is generated by PHP and part by JavaScript.
According to StatCounter, mobile traffic already exceeds desktop, and search engines consider adaptivity when ranking. As Bitrix developers with over 10 years of experience, we know how to properly adapt a template without losing functionality. Over the past five years, we have adapted more than 30 templates for various industries — from online stores to corporate portals.
Why Bitrix Adaptivity Differs from a Regular Site
A site template in Bitrix is a folder in /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/.
Adaptivity requires work on two levels:
- Site template (
header.php,footer.php, common blocks): navigation, header, footer, sidebar - Component templates:
bitrix:catalog.section,bitrix:news.list,bitrix:sale.basket.baskethave their own markup intemplate.php— that also needs adaptation
The most common mistake is adapting only the site template and forgetting about the component templates. As a result, the header is responsive, but product cards are still in a fixed table.
Which Components Need Adaptation First?
We identify four zones that break most often:
Mobile menu — the bitrix:menu component generates a <ul> with classes. For a mobile hamburger menu, you either need to override the component template or control visibility via CSS/JS. It's important to preserve accessibility: the menu must work without JavaScript when SSR caching is enabled.
Catalog and filter — bitrix:catalog.section with bitrix:catalog.smart.filter on mobile requires a separate approach: the filter is placed in an overlay or accordion, product grids switch from 3 columns to 2 and 1.
Forms — bitrix:form.result.new and checkout forms (bitrix:sale.order.ajax) often have multi-column layouts that need to be rearranged into a single column.
Data tables — price lists, product characteristics: on mobile they are replaced with a stacked layout or horizontal scroll with a fixed first column.
Mobile-first or Desktop-first: Which to Choose?
For new projects, we recommend Mobile-first — write styles for mobile and expand using min-width media queries. This produces cleaner code and better mobile performance. Desktop-first is relevant when adapting an existing template originally written for desktop: add media queries with max-width, less risk of breaking the current look. In practice, the second approach is more common but requires more thorough testing. It is based on the concept of Responsive web design.
Breakpoints are agreed with the design, but a typical set for Bitrix projects is: 1280px, 1024px, 768px, 480px, 375px.
Case Study from Our Practice: Corporate Site Adaptation
A construction company's site, template written several years ago, no adaptivity. Mobile traffic share according to Metrica was 58%. Task: full adaptation without redesign and without rewriting PHP logic.
We went through all pages and compiled a list of problematic components and blocks. The main work focused on: the main page (banner + service blocks), catalog (filter + grid), contacts page (Yandex map + form). In parallel, we overrode templates of three components in /local/templates/. The work took 5 to 8 business days. Result: mobile traffic started bringing 30% more leads, and the bounce rate dropped by 15%.
What the Work Includes
- Audit of the current template and identification of problematic components
- Adaptation of the site template (header, footer, common blocks)
- Overriding component templates (up to 5–10)
- Setting breakpoints and media queries
- Testing on real devices and in BrowserStack
- Checking Bitrix caching — adaptive scripts should not enter the cache incorrectly
- Handover of corrections and adaptive documentation
We guarantee that after our work, your site will display correctly on all devices — from iPhone SE to 27-inch monitors.
Testing the Adaptivity
We check in Chrome DevTools (device toolbar) — that's the minimum. Additionally: real devices or BrowserStack, checking touch events, checking cached Bitrix pages (important: Bitrix caches HTML — make sure adaptive scripts did not enter the cache incorrectly).
Timelines
| Scope of Work | Duration |
|---|---|
| Adapting an existing template (up to 10 page types) | 3–7 days |
| Adapting with component overrides (10–25 types) | 1–3 weeks |
| Full adaptive template layout from scratch | 3–6 weeks |
We'll evaluate your project for free — contact us for a consultation. Order turnkey adaptive template layout, and we'll start within a week.