/* ================================================================ Мобильная вёрстка сайта: каталог (кнопка «Фильтр», чипсы, сетка по 2 в ряд), заголовки разделов, карточки, контакты, тексты страниц. Почти всё лежит внутри max-width:767px и десктопа не касается; исключения собраны ниже под заголовком «ОБЩЕЕ ДЛЯ ВСЕХ ЭКРАНОВ». Кнопку фильтра вставляет js/mobile_filter.js (подключён из catalog.php). ================================================================ */ /* ---------- ОБЩЕЕ ДЛЯ ВСЕХ ЭКРАНОВ ---------- Заголовки блоков главной («новинки», «распродажа», «бренды») стояли слишком близко к своему содержимому: у темы под ними 20 px, и на компьютере надпись так же примыкает к логотипам, как примыкала на телефоне. Разводим на всех ширинах — это не мобильная правка. */ .color_scheme .section_homepage .section_heading{margin-bottom:26px} .color_scheme .section_logo-list .section_heading{margin-bottom:26px} /* На компьютере «бренды» подходили к распродаже вплотную: 46 px, которые мы дали блокам вместо убранных кнопок «Показать все», на широком экране читаются как ничто. Добавляем воздуха только десктопу — на телефоне владельца расстояние устраивает. */ @media (min-width:768px){ .color_scheme .section_logo-list{margin-top:34px} } /* Номера нумерованных списков рисуются в левом поле. Тема даёт 30 px (style02.css, `.rte ol`) — одноцифровым пунктам хватает, двузначным (17., 25.) нет, и первая цифра обрезается. В статье про подготовку основания пункты идут до 28, поэтому поле нужно на всех экранах, а не только на телефоне. */ .rte ol{padding-left:36px} /* JS строит кнопку и чипсы на любой ширине, поэтому по умолчанию прячем и то и другое. Показываются они только внутри max-width:767px ниже. Без этой строки для .mf-chips ряд чипсов вываливался на десктопе сплошным текстом над фильтром. */ .mf-toggle,.mf-chips{display:none} @media (max-width:767px){ /* порядок на телефоне: кнопка «Фильтр» -> панель фильтра -> заголовок и товары. Всё остальное (статьи каталога, распорки clear:both) уезжает в конец — иначе при flex они с order:0 всплывают наверх. */ #catalog-container > .row{ display:-ms-flexbox;display:flex; -ms-flex-direction:column;flex-direction:column; } #catalog-container > .row > *{-ms-flex-order:6;order:6} #catalog-container > .row > .mf-toggle{-ms-flex-order:1;order:1} #catalog-container > .row > .mf-chips{-ms-flex-order:2;order:2} #catalog-container > .row > .sidebar_small{-ms-flex-order:3;order:3} #catalog-container > .row > #catalog-container-output{-ms-flex-order:4;order:4} .mf-toggle{ display:block;width:auto; margin:0 15px 18px;padding:14px 18px; background:#fff;border:1px solid #d8d8d8;border-radius:10px; font-size:15px;font-weight:600;color:#3a3a3a;text-align:left; letter-spacing:.02em;cursor:pointer; position:relative; } .mf-toggle:after{ content:'';position:absolute;right:20px;top:50%; width:9px;height:9px;margin-top:-6px; border-right:2px solid #7d94a3;border-bottom:2px solid #7d94a3; -webkit-transform:rotate(45deg);transform:rotate(45deg); } .mf-toggle.mf-open:after{ margin-top:-2px; -webkit-transform:rotate(225deg);transform:rotate(225deg); } .mf-toggle .mf-count{ display:inline-block;margin-left:8px;padding:1px 8px; background:#7d94a3;color:#fff;border-radius:999px; font-size:12px;font-weight:600; } /* свёрнутое состояние: сам блок фильтра скрыт */ .sidebar_small.mf-collapsed{display:none} /* развёрнутый — с рамкой, чтобы было видно границы панели */ .sidebar_small.mf-expanded{ border:1px solid #e6e6e6;border-radius:10px; padding:6px 14px 14px;margin:0 0 22px; } /* ---------- быстрые чипсы над товарами (js/mobile_filter.js) ---------- */ .mf-chips{ display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap; gap:7px;margin:0 15px 18px; } .mf-chip{ display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:6px; border:1px solid #dcdcdc;background:#fff;color:#3a3a3a; padding:7px 13px;border-radius:999px;font-size:13px;line-height:1.2; text-decoration:none;white-space:nowrap; } .mf-chip:hover,.mf-chip:focus{color:#3a3a3a;text-decoration:none} .mf-chip-cnt{color:#aaa;font-size:12px} .mf-chip-on{background:#4d6675;border-color:#4d6675;color:#fff} .mf-chip-on:hover,.mf-chip-on:focus{color:#fff} .mf-chip-on .mf-chip-cnt{color:rgba(255,255,255,.7)} /* у активного чипса — крестик: повторный клик снимает фильтр */ .mf-chip-on:after{content:'\00d7';font-size:15px;line-height:1;opacity:.8} /* ---------- карточки товаров по 2 в ряд ---------- */ .color_scheme .product_listing__main{margin-left:-6px;margin-right:-6px} .color_scheme .product_listing__main > .col-sm-4{ width:50%;float:left;padding-left:6px;padding-right:6px; } /* левая карточка каждого ряда сбрасывает обтекание — ряды не слипаются, если у соседей названия разной высоты */ .color_scheme .product_listing__main > .col-sm-4:nth-child(odd){clear:both} /* внутри карточки картинка и текст на всю ширину (по умолчанию было 80% по центру) */ .color_scheme .product_listing__main .product_img, .color_scheme .product_listing__main .product_info{ width:100%;margin:0; } .color_scheme .product_listing__main .product_name{font-size:13px;line-height:1.35} .color_scheme .product_listing__main .product_info p{font-size:12px} .color_scheme .product_listing__main .product_price .money{font-size:15px} /* Бейджи «новинка»/«наличие»: nowrap обязателен — в кружок 40px слово «новинка» переносится, и хвост «а» падает ниже кружка (line-height двигает вторую строку). */ .color_scheme .product_listing__main .product_badge{ width:40px;height:40px;line-height:36px;font-size:7px; white-space:nowrap; } /* ---------- низ карточки: только иконки ---------- Подпись «В корзину» на половинной карточке не помещается и залезает под лупу (.catalog-item-zoom на мобиле position:absolute; right:24px — style02.css). Прячем текст через font-size:0, иконке размер возвращаем. */ .color_scheme .product_listing__main .product_links .add_to_cart_form a{ font-size:0; } .color_scheme .product_listing__main .product_links a i, .color_scheme .product_listing__main .product_links .catalog-item-zoom i{ font-size:17px; } .color_scheme .product_listing__main .product_links{ padding-top:4px; } /* ---------- заголовок раздела ---------- Тема на телефоне не уменьшает, а УВЕЛИЧИВАЕТ заголовок: 18px на десктопе против 20px на мобильном (responsive01.css, max-width:639px), и всё это заглавными с разрядкой 0.1em. «ПАРКЕТНАЯ ДОСКА» растягивалось во всю ширину экрана и кричало громче товаров. Специфичность та же, что у темы, но наш файл подключён позже — поэтому выигрывает. */ .color_scheme .page_heading{ font-size:16px;letter-spacing:.05em; margin-top:18px;padding-bottom:6px; } /* ---------- ряд карточек в каталоге: цены на одной линии ---------- ВАЖНО: только внутри #catalog-container. Класс product_listing__main носят и блоки новинок на главной, но карточки там col-sm-3 (25 %), а не col-sm-4, и сетка сжала их вчетверо — названия печатались по букве в столбик. Поймано на живом 14.09, лечится именно привязкой к каталогу. Было два float-столбца: у соседей названия разной длины — и цена с кнопками уезжала вниз, ряд выглядел рваным. Сетка даёт ячейкам ряда равную высоту, а место под название в две строки держит цены на одной линии, не отодвигая их к низу карточки. */ /* Промежуток между карточками режем в пользу самих карточек: на 393 px было 15 px поля контейнера с каждой стороны и 12 px между колонками — карточка выходила ~175 px, названия ломались в три строки, а цена висела в полупустой строке. Стало ~183 px. */ #catalog-container .container{padding-left:10px;padding-right:10px} #catalog-container .product_listing__main{ display:grid;grid-template-columns:1fr 1fr; column-gap:8px;margin-left:0;margin-right:0; } #catalog-container .product_listing__main > .col-sm-4{ width:auto;float:none;padding-left:0;padding-right:0; } #catalog-container .product_listing__main > .col-sm-4:nth-child(odd){clear:none} /* распорки темы в сетке стали бы пустыми ячейками */ #catalog-container .product_listing__main > .clearfix{display:none} /* место под две строки названия и одну строку размеров: цены встают вровень, но остаются сразу под размерами — без пустого провала в середине карточки */ #catalog-container .product_listing__main .product_name{ min-height:3.1em;margin-bottom:0; } /* строка размеров: «160 х 500-1500 х 15 мм» не влезала, и «мм» падало на вторую строку. Вместе с неразрывным пробелом перед единицей (catalog_output.php) встаёт в одну строку. */ #catalog-container .product_listing__main .product_info p{ font-size:11.5px;line-height:1.3;margin-top:7px; } #catalog-container .product_listing__main .product_prop{margin-top:6px} /* Название и цену развело: тема даёт названию padding-top 20 px, цене — ещё 10 px сверху, а место под две строки добавляло пустоты, когда название короткое. Подбираем всё разом. */ #catalog-container .product_listing__main .product_name{padding-top:8px} #catalog-container .product_listing__main .product_price{padding-top:0} /* ---------- контакты ---------- ВАЖНО, ГДЕ ЛЕЖАТ СТИЛИ ЭТОЙ СТРАНИЦЫ: прямо в тексте страницы в базе (админка), блоком