/* ============================================================ enjoyaltai.ru — мобильная вёрстка главной (Tilda Zero-блоки) ------------------------------------------------------------ ПРОБЛЕМА 1 — обрезался текст. На телефоне artboard Zero-блока ~342px, а элементы внутри свёрстаны под 390px и шире. Тильда режет лишнее (overflow:hidden): у слов пропадали окончания, в футере обрезалось меню и почта. ПРОБЛЕМА 2 — разные промежутки между абзацами. В Zero-блоке у каждого элемента жёстко задан top. На телефоне высоты текста поехали, и зазоры разъехались от 9px до 985px. РЕШЕНИЕ. Семь текстовых блоков переводим из абсолютного позиционирования в поток: artboard -> flex-колонка с одинаковым gap:24px и height:auto. ВАЖНО: порядок элементов в DOM НЕ совпадает с визуальным (например 0,1,7,5,3,6,4,2,8), поэтому каждому элементу задан явный order — иначе текст перемешался бы. Футер собран в две колонки отдельными правилами. ПРОБЛЕМА 3 — экран ездил влево-вправо. Две причины, обе про box-sizing: content-box. а) стоковые .t-container Тильды вылезали на 8px (было и до правок); б) артборду добавили padding, а он content-box — ещё 7px. Плюс нельзя менять overflow артборда на visible: фоновые слои .t396__carrier / .t396__filter шире него и должны обрезаться. ПРОВЕРЕНО вживую на 320 / 390 / 430 px: зазоры ровно 24px, порядок чтения сохранён, обрезаний и наложений нет, горизонтальный скролл РОВНО 0 (сверять scrollWidth с clientWidth, НЕ с innerWidth — innerWidth включает полосу прокрутки и маскирует проблему). КУДА ВСТАВИТЬ: Настройки сайта -> Ещё -> HTML-код в , обернув всё в ... ============================================================ */ @media screen and (max-width: 479px) { #rec672167430 .t396, #rec679793185 .t396, #rec679608858 .t396, #rec679628935 .t396, #rec3538921401 .t396, #rec679649959 .t396, #rec679653620 .t396 { height: auto !important; } /* Стоковые контейнеры Тильды стоят content-box с боковыми padding по 16px и вылезали за экран на 8px (left 24 + 414 = 438 при экране 430). Это было и до правок. */ #allrecords [class*="t-container"] { box-sizing: border-box !important; max-width: 100% !important; } #rec672167430 .t396__artboard, #rec679793185 .t396__artboard, #rec679608858 .t396__artboard, #rec679628935 .t396__artboard, #rec3538921401 .t396__artboard, #rec679649959 .t396__artboard, #rec679653620 .t396__artboard { /* border-box обязателен: артборд у Тильды content-box, без него padding прибавляется к ширине и страница едет вбок */ box-sizing: border-box !important; display: flex !important; flex-direction: column !important; gap: 24px !important; height: auto !important; min-height: 0 !important; padding: 40px 4% !important; /* overflow оставляем hidden (как у Тильды): фоновые слои .t396__carrier / .t396__filter шире артборда и должны обрезаться. С visible они дают горизонтальный скролл. */ overflow: hidden !important; } #rec672167430 .t396__artboard .tn-elem, #rec679793185 .t396__artboard .tn-elem, #rec679608858 .t396__artboard .tn-elem, #rec679628935 .t396__artboard .tn-elem, #rec3538921401 .t396__artboard .tn-elem, #rec679649959 .t396__artboard .tn-elem, #rec679653620 .t396__artboard .tn-elem { position: static !important; left: auto !important; top: auto !important; width: 100% !important; } /* rec672167430 */ #rec672167430 .tn-elem[data-elem-id="1700831913970"] { order: 1 !important; } #rec672167430 .tn-elem[data-elem-id="1700834213503"] { order: 2 !important; } #rec672167430 .tn-elem[data-elem-id="1700831964950"] { order: 3 !important; } #rec672167430 .tn-elem[data-elem-id="1700834713262"] { order: 4 !important; } #rec672167430 .tn-elem[data-elem-id="1700831985680"] { order: 5 !important; } #rec672167430 .tn-elem[data-elem-id="1700834730925"] { order: 6 !important; } /* rec679793185 */ #rec679793185 .tn-elem[data-elem-id="1700118182508"] { order: 1 !important; } #rec679793185 .tn-elem[data-elem-id="1700833578822"] { order: 2 !important; } #rec679793185 .tn-elem[data-elem-id="1700033313091"] { order: 3 !important; } #rec679793185 .tn-elem[data-elem-id="1700835482059"] { order: 4 !important; } /* rec679608858 */ #rec679608858 .tn-elem[data-elem-id="1702287261032"] { order: 1 !important; } #rec679608858 .tn-elem[data-elem-id="1702287581621"] { order: 2 !important; } #rec679608858 .tn-elem[data-elem-id="1702287623926"] { order: 3 !important; } #rec679608858 .tn-elem[data-elem-id="1702287639645"] { order: 4 !important; } #rec679608858 .tn-elem[data-elem-id="1702287651407"] { order: 5 !important; } #rec679608858 .tn-elem[data-elem-id="1702287650346"] { order: 6 !important; } #rec679608858 .tn-elem[data-elem-id="1702287676135"] { order: 7 !important; } /* rec679628935 */ #rec679628935 .tn-elem[data-elem-id="1470209944682"] { order: 1 !important; } #rec679628935 .tn-elem[data-elem-id="1470210011265"] { order: 2 !important; } #rec679628935 .tn-elem[data-elem-id="1470233923389"] { order: 3 !important; } #rec679628935 .tn-elem[data-elem-id="1702289899783"] { order: 4 !important; } #rec679628935 .tn-elem[data-elem-id="1702289898717"] { order: 5 !important; } #rec679628935 .tn-elem[data-elem-id="1702289897709"] { order: 6 !important; } #rec679628935 .tn-elem[data-elem-id="1702289896346"] { order: 7 !important; } #rec679628935 .tn-elem[data-elem-id="1702289880120"] { order: 8 !important; } /* rec3538921401 */ #rec3538921401 .tn-elem[data-elem-id="1702290439301"] { order: 1 !important; } #rec3538921401 .tn-elem[data-elem-id="1702290536852"] { order: 2 !important; } #rec3538921401 .tn-elem[data-elem-id="1702290652485"] { order: 3 !important; } #rec3538921401 .tn-elem[data-elem-id="1702290467311"] { order: 4 !important; } #rec3538921401 .tn-elem[data-elem-id="1702290569569"] { order: 5 !important; } #rec3538921401 .tn-elem[data-elem-id="1702290585343"] { order: 6 !important; } #rec3538921401 .tn-elem[data-elem-id="1702290615986"] { order: 7 !important; } #rec3538921401 .tn-elem[data-elem-id="1702290633426"] { order: 8 !important; } #rec3538921401 .tn-elem[data-elem-id="1702290703862"] { order: 9 !important; } /* rec679649959 */ #rec679649959 .tn-elem[data-elem-id="1470209944682"] { order: 1 !important; } #rec679649959 .tn-elem[data-elem-id="1702291168604"] { order: 2 !important; } #rec679649959 .tn-elem[data-elem-id="1702291219733"] { order: 3 !important; } #rec679649959 .tn-elem[data-elem-id="1702291252205"] { order: 4 !important; } #rec679649959 .tn-elem[data-elem-id="1702291293028"] { order: 5 !important; } #rec679649959 .tn-elem[data-elem-id="1702291241724"] { order: 6 !important; } #rec679649959 .tn-elem[data-elem-id="1702291251175"] { order: 7 !important; } /* rec679653620 */ #rec679653620 .tn-elem[data-elem-id="1470209944682"] { order: 1 !important; } #rec679653620 .tn-elem[data-elem-id="1470210011265"] { order: 2 !important; } #rec679653620 .tn-elem[data-elem-id="1702291624387"] { order: 3 !important; } #rec679653620 .tn-elem[data-elem-id="1702291622435"] { order: 4 !important; } #rec679653620 .tn-elem[data-elem-id="1702291620313"] { order: 5 !important; } #rec679653620 .tn-elem[data-elem-id="1702291623411"] { order: 6 !important; } #rec679653620 .tn-elem[data-elem-id="1702291621435"] { order: 7 !important; } #rec679653620 .tn-elem[data-elem-id="1702291619283"] { order: 8 !important; } #rec679653620 .tn-elem[data-elem-id="1702291708870"] { order: 9 !important; } /* --- Футер: меню в две колонки по ширине экрана --- */ #rec679734955 .tn-elem[data-elem-id="1702298836126"] { left: 0 !important; width: 100% !important; } /* подложка */ #rec679734955 .tn-elem[data-elem-id="1702298894526"] { left: 3% !important; width: 45% !important; } /* О компании */ #rec679734955 .tn-elem[data-elem-id="1702298920011"] { left: 52% !important; width: 45% !important; } /* Отзывы */ #rec679734955 .tn-elem[data-elem-id="1702298934370"] { left: 3% !important; width: 45% !important; } /* Цены */ #rec679734955 .tn-elem[data-elem-id="1702298960033"] { left: 52% !important; width: 45% !important; } /* Гарантии */ #rec679734955 .tn-elem[data-elem-id="1702298998166"] { left: 3% !important; width: 94% !important; } /* телефон */ #rec679734955 .tn-elem[data-elem-id="1702299044129"] { left: 3% !important; width: 94% !important; } /* почта */ }