Testing responsive layout of 1C-Bitrix site
On 1C-Bitrix sites, responsive markup often breaks in non-obvious places: the bitrix:catalog.section component generates a product table that doesn't fit in 375px screen, the BX.PopupWindow popup extends beyond viewport on tablet, and the bitrix:sale.basket.basket template in mobile version loses the order button beyond the screen. The issue is that standard Bitrix templates were designed for desktop and responsiveness was added on top — with varying quality.
Testing responsiveness — this is not "opened on phone and looked". This is a systematic check of all critical pages at real resolutions with recording and fixing defects.
What exactly we test
The list of control points depends on the template, but the basic set of breakpoints:
| Breakpoint | Device | Typical problems |
|---|---|---|
| 320-375px | Smartphones (SE, old Android) | Container overflow, text clipping, horizontal scroll |
| 376-428px | Modern smartphones | Incorrect filter placement in catalog |
| 429-768px | Tablets (portrait) | Product grid 2 columns instead of 3, menu issues |
| 769-1024px | Tablets (landscape) | Sidebar filter overlaps content |
| 1025-1280px | Laptops | Minor padding defects |
Critical pages for e-commerce: homepage, catalog (list + detailed), cart, checkout, personal account, search page. Each is checked at each breakpoint.
Tools and methodology
Chrome DevTools Device Mode — first pass. We check all breakpoints, record horizontal scroll with document.documentElement.scrollWidth > window.innerWidth in console. It's fast but doesn't show real touch-event issues and render performance problems.
BrowserStack / real devices — second pass. DevTools emulates viewport but doesn't emulate Safari on iOS behavior. Classic problems only visible on real devices:
-
position: fixedin Safari iOS works differently with open keyboard -
100vhin mobile browsers includes address bar — element goes off screen - Touch events on Bitrix buttons:
BX.bindsometimes doesn't fire on tap in iOS
Lighthouse Mobile Audit — check tap target size (minimum 48x48px), font size (minimum 16px for input, otherwise iOS zooms), viewport meta tag.
Typical defects in Bitrix templates and their fixes
Horizontal scroll. In 80% of cases the reason — element with fixed width inside flex/grid container. Often this is a table in bitrix:sale.order.ajax or slider in banner template. Solution — overflow-x: hidden on wrapper and refactor table to cards on mobile via media query.
Menu-burger doesn't work. Stock bitrix:menu doesn't provide mobile menu out of the box. Component template needs enhancement: add toggle button, off-canvas panel, handle touchstart for swipe-close.
Catalog filter. The bitrix:catalog.smart.filter component renders all properties in one column. On mobile, filter takes 3-4 screens before products. Solution — collapse filter into sliding panel with "Filters (N)" button, where N is number of active filters.
Images. Stock components use CFile::ResizeImageGet() with fixed sizes. On mobile they load desktop images 1200px. Need srcset / <picture> integration into component templates, or webp usage via perfmon module or server-side conversion.
Acceptance checklist
After testing and fixes — final check against the checklist:
- No horizontal scroll on all breakpoints
- All interactive elements are accessible and clickable (tap target >= 48px)
- Forms (order, auth, feedback) work correctly with mobile keyboard
- Images don't cause Layout Shift (CLS < 0.1)
- Font in input minimum 16px (prevents auto-zoom on iOS)
- Bitrix popups and modal windows (
BX.PopupWindow) position correctly
Testing and fixing responsiveness takes 2-3 days provided the template already has basic responsive grid. If template is desktop without media queries — that's a different task with different timelines.