/* The site was scraped from Prom.ua's desktop template - it never had a real mobile layout captured (the live site likely served a separate mobile build). Adding a viewport meta tag alone just exposed the raw desktop layout at phone width: a float+negative-margin sidebar (.container/.sidebar/.container-left) and a floated fixed-width product photo (.b-product__image-panel, 288px, with the info column pushed over by a fixed 322px margin) both overflow and overlap badly under ~400px. This file targets the 645/lightred ("modern") template, used by most real pages and by the RU-language synthetic recovered product pages. Loaded globally (via the root layout, not per-page) - its selectors are scoped to lightred-only classes, so it's a no-op on pages using the other templates. Every rule below is !important: this stylesheet is linked in , so it loads BEFORE each page's own template CSS (linked further down, inside
) - without !important, a later same-specificity unconditional desktop rule would win over an earlier media-query one even while the media query is active. */ @media (max-width: 767px) { /* THE actual root cause of "everything looks tiny" on mobile even after every overflow/overlap fix below: both real template stylesheets pin the page's outermost box to a hard 980px minimum (body{min-width:980px} in lightred.css, .b-layout{min-width:980px} in newlime.css) - a leftover from whatever separate mobile build Prom.ua served instead of ever shrinking this desktop one. With that in place, the viewport meta tag doesn't help: the browser still has to fit a 980px-wide box into a ~390px screen, so it zooms the ENTIRE page out to compensate - every fix above was correctly removing overflow *within* that shrunk 980px box, but the box itself never got smaller. This single override is what actually lets the page render at real mobile width instead of a shrunk-down desktop one. Same idea for two smaller leftover min-widths that would each cause a few px of horizontal overflow on the narrowest phones. */ body, .b-layout { min-width: 0 !important; } .cs-product-list__img-wrapper, .cs-footer__company-info-item { min-width: 0 !important; } /* Safety net for the homepage's "scrolls right into empty space" bug: found one real cause (a map popup meant to be JS-triggered - .js-map_container has a hard-coded .h-width-600 utility class, 600px, sitting inside a wrapper with inline style="display:none" that should already remove it from layout - but rather than chase down every such hidden-until-JS widget one at a time, just refuse to let the page scroll horizontally at all on mobile. Nothing legitimate on these pages needs horizontal scroll. */ html, body { overflow-x: hidden !important; max-width: 100vw !important; } .h-width-600, .h-width-650, .h-width-700 { width: auto !important; max-width: 100% !important; } /* header: stop the fixed-width logo badge and table-cell nav from forcing horizontal scroll; stack top bar items instead of cramming them into one row */ .header-top { height: auto !important; padding: 8px 0 !important; } .header-top__wrapper { display: block !important; } .header-top__table, .header-top__table-cell { display: block !important; width: 100% !important; text-align: center !important; } .header-top__logo { position: static !important; width: auto !important; max-width: 160px !important; margin: 0 auto 8px !important; } .header__table, .header__cell { display: block !important; width: 100% !important; text-align: center !important; padding: 8px 0 !important; } .b-header-company-name { margin-left: 0 !important; } .top-menu { text-align: center !important; } .top-menu__item { display: inline-block !important; border-left: 0 !important; } .search { display: block !important; width: 100% !important; max-width: 320px !important; margin: 8px auto 0 !important; } .search__form { width: 100% !important; } /* the "выгодному партнерству" promo banner: stack text above button instead of squeezing both onto one row */ .b-promo-banner { text-align: center !important; } .b-promo-banner__text, .b-promo-banner__button { display: block !important; margin: 4px auto !important; } /* sidebar layout: the float+negative-margin "holy grail" 2-column trick only works at desktop widths - stack main content above the sidebar instead of letting it push content off-screen */ .container, .sidebar { float: none !important; width: 100% !important; margin-left: 0 !important; } .container-left { margin-left: 0 !important; } .container-search .b-content__body { width: 100% !important; margin: 0 !important; } /* product listing grid: one column instead of 3 cramped ones */ .b-product-line_type_gallery, .content-line_product-line .b-layout__clear { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* product detail page: the classic culprit - a floated fixed-width photo with the info column pushed over by a fixed margin. Stack them instead. */ .b-product__image-panel { float: none !important; width: 100% !important; max-width: 100% !important; margin-right: 0 !important; margin-bottom: 16px !important; } .b-product__info-holder { margin-left: 0 !important; } .b-product__zoom-box, .b-product__image { width: 100% !important; } .b-centered-image__img { max-width: 100% !important; height: auto !important; } /* homepage hero photo: it's portrait-oriented, so at full mobile width (scaled to preserve aspect ratio) it renders very tall - users had to scroll past most of a screen's height of photo before reaching any real content (category tiles etc). Cap it to a fixed height and crop instead of scaling the whole thing down. */ .b-slider-wrapper { max-height: 320px !important; overflow: hidden !important; } .b-slider__image { width: 100% !important; height: 320px !important; max-height: none !important; object-fit: cover !important; object-position: top !important; } /* generic safety net: nothing should be wider than the viewport */ img, table { max-width: 100% !important; height: auto !important; } .page-wrapper { padding-left: 12px !important; padding-right: 12px !important; } /* the third restored template (design_template 1000 / "newlime", cs-* classes, currently just one page) has the exact same float+negative-margin sidebar trick as the others, and its own ~30 media queries never go below 1024px either. */ .cs-sidebar { float: none !important; width: 100% !important; margin-left: 0 !important; padding-right: 0 !important; } .cs-page__main-content-wrapper { padding-left: 0 !important; } .cs-page__content { padding-left: 12px !important; padding-right: 12px !important; } /* footer: both link columns (.b-sitewide-links, "ДЛЯ ЖЕНЩИН" etc.) and the schedule/address/contacts row (.footer-table) use a CSS-table layout with each cell pinned to 25% width - 4 (or 3) columns crammed into phone width wraps every word onto its own line and clips the last column off the right edge entirely. Stack them. */ .b-sitewide-links, .footer-table { display: block !important; } .b-sitewide-links__item, .footer-cell { display: block !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; } /* sidebar category submenu: on desktop this is a :hover-triggered flyout positioned to the right of its parent item (.sidebar-menu__dropdown { position:absolute; left:100% }) - on a phone there's no room to its right, so it rendered as a tiny box cut off past the edge of the screen. There's also no real way to "hover" on touch (the first tap just triggers the CSS :hover state instead of following the link, so it LOOKS like tapping the category does nothing). Simplest reliable fix: make it a normal always-expanded inline sub-list instead of a hover flyout - no JS/touch-detection needed, and each category only has a handful of subcategories so the sidebar doesn't get unreasonably long. */ .sidebar-menu__dropdown { position: static !important; opacity: 1 !important; visibility: visible !important; left: auto !important; top: auto !important; min-width: 0 !important; width: 100% !important; padding: 0 0 8px 20px !important; box-sizing: border-box !important; } .sidebar-menu__dropdown-wrapper { box-shadow: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; background: transparent !important; } .sidebar-menu__dropdown-wrapper:before { display: none !important; } /* "b" template header (legacy-theme.css): the phone numbers up top are redundant on mobile (they're repeated in the footer contacts), and .b-header__cart is the template's own header cart button - redundant with the site's own floating cart button (bottom-right, added in Cart.tsx) which already covers every page. Both just eat up vertical space above the fold on a phone; keep them on desktop, where the space isn't scarce and .b-header__cart is the only visible cart entry point in the header. */ .b-header__top, .b-header__cart { display: none !important; } /* Text safety net: found and fixed one real cause of text rendering cut off past the edge of the screen (a flex item - the thumbnail strip on product pages - missing min-width:0, forcing the whole page wider than the viewport upstream), but force-wrap text everywhere as a defense against any other such layout bug forcing a text container wider than the screen elsewhere on the site. */ h1, h2, h3, p, .b-title, .b-user-content { max-width: 100% !important; overflow-wrap: break-word !important; word-wrap: break-word !important; } }