/* ── Flexo Africa — phone and tablet rescue ────────────────────────────────── * * ONE file, injected into every page, so a fix lands everywhere instead of * being copied into 77 separate pages and drifting apart. * * WHY IT EXISTS. Cam, 2026-09-04: "can we make the site easy to also see and * view on a mobile phone or iPad?" Measured all 29 linked pages at iPhone * width (390 px): 19 already fitted perfectly, and 9 ran off the side of the * screen so you had to pinch and drag to read them. * * / needed 765px in a 384px screen the admin nav * /assets.html 540px a row of buttons that would not wrap * /admin-stats.html 465px a 4-across row of stat cards * /cylinder-repeat.html 461px a reference table * /pricing.html 458px the plan comparison table * /barcode-generator.html 449px a card stretched by its own contents * /trapping-advisor.html 433px ink labels that would not wrap * /anilox-calc.html 421px a reference table * /ink-mixing-calc.html 415px a 4-across row of ink chips * * ⭐ THE HOME PAGE WAS ONLY BROKEN FOR CAM. Measured both ways: signed in as * admin it needed 765px because the four admin-only links (Admin, User * Approvals, Companies, Analytics) refuse to wrap; as an ordinary customer the * same page came to 384px and fitted fine. * * ⛔ NOTHING HERE HIDES CONTENT. `overflow-x:hidden` on the page would make * the numbers "fit" while quietly cutting off the right-hand columns of a * table. Anything genuinely too wide to fit, like a reference table, scrolls * INSIDE ITS OWN BOX so every column is still reachable. */ @media (max-width: 768px) { /* ── 1. Nothing may be wider than the screen ─────────────────────────── */ img, svg, video, canvas { max-width: 100%; height: auto; } /* ⭐⭐ THE SINGLE MOST USEFUL RULE HERE. A grid or flex child defaults to * min-width:auto, which means it refuses to shrink below its own content * and shoves the whole page wider. That is what made the Barcode Generator * card 425px wide inside a 342px column. * * ⚠️ IT HAS TO BE EVERY GRID, NOT A NAMED LIST. The first attempt named * five (.grid, .cards, .cols, .setup-grid, .bases-grid) and Cylinder Repeat * STILL ran over, because its boxes sit in a .input-grid nobody had listed. * Naming them one at a time is chasing the last page you happened to open. * `min-width: 0` only ever ALLOWS something to shrink, so it cannot break a * layout that already fits — which is what makes the broad selector safe. */ [class*="grid"] > *, [class*="row"] > *, .cards > *, .cols > * { min-width: 0; } /* ── 2. Rows of links and buttons wrap instead of running off the edge ── */ /* ⚠️ EVERY BAR OF TABS AND LINKS, NOT JUST THE ONE CALLED nav-tabs. The * Assets Admin page runs its own `.page-tabs` bar, 584px of tabs in a 390px * screen, and the FMCG brief pages run their own `.nav-links`. Neither is * called nav-tabs, so neither was wrapping. flex-wrap does nothing at all * to something that is not a flex row, which is what makes this safe. */ nav.nav-tabs, [class*="nav"], [class*="tabs"] { flex-wrap: wrap !important; row-gap: 6px; } /* Same story at the bottom of the page: the FMCG brief pages lay their * footer out as one non-wrapping row (brand, links, copyright) and it hung * 11px off the edge. A footer that wraps costs nothing on a desktop. */ footer, [class*="footer"] { flex-wrap: wrap; row-gap: 10px; } .co-header-right { flex-wrap: wrap !important; row-gap: 8px; margin-left: 0 !important; } .ink-labels { flex-wrap: wrap !important; row-gap: 6px; } /* ── 3. Multi-column blocks stack instead of squeezing ───────────────── */ .cards { grid-template-columns: repeat(2, 1fr) !important; } .cols { grid-template-columns: 1fr !important; } .bases-grid { grid-template-columns: repeat(2, 1fr) !important; } .stats-row, .stats-bar { grid-template-columns: repeat(2, 1fr) !important; } /* ── 4. A table too wide for a phone scrolls inside its own box, so every * column is still reachable, and the PAGE stays put. * * ⚠️ THIS HAS TO BE EVERY TABLE, NOT A NAMED LIST. The first attempt named * the three tables the measurement had caught (#table1, .compare-table, * .ref-table) and the Analytics page STILL ran over, because its Top cities * and Top networks panels hold a second, unnamed table 403px wide. A named * list only ever fixes the tables somebody has already tripped over. * On a table that already fits, this rule does nothing you can see. */ .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── 4b. A file picker refuses to shrink below its own natural width and * shoves the row off the screen. Nearly every tool has one, so this * is worth doing site-wide rather than page by page. It is what made * the Barcode Generator's "Fit to existing artwork" row overflow. */ /* ⚠️ `width:100%` IS NOT COSMETIC, IT IS A REGRESSION FIX. A file picker * sizes itself from its own text, so the moment the 16px rule below made * that text bigger the picker grew from about 250px to 303px, and on Visual * Compare that pushed the two drop zones side by side out to 426px in a * 390px screen — a page that had been fitting perfectly. MEASURED before and * after: 0px over, then 36px over, then 0px again with this line. */ input[type="file"] { width: 100%; min-width: 0; max-width: 100%; } .row { flex-wrap: wrap; } /* ── 4c. Trapping Advisor's ink labels are a grid with two hard 148px * columns, which cannot fit a phone. Let those two shrink; the order * and alignment of the labels is unchanged. */ .ink-labels { grid-template-columns: 1fr minmax(0, 148px) minmax(0, 148px) 28px !important; } /* ═══ POLISH ═══════════════════════════════════════════════════════════ * Everything above makes a page FIT. Everything below makes it pleasant to * actually use with a thumb. Measured on 2026-09-04 across the seven busiest * pages before writing any of it. */ /* ── 6. Things you tap are big enough to hit. * MEASURED: 44px is the accepted comfortable minimum, and the site was well * under it — the home page had 15 of its 38 tappable things below 44px, the * smallest at 15px, and AI Quality Control had 7 of 8. It is the shared * header on every page: "Help", "Sign out", "All tools", "Dashboard" were * all 16 to 31px tall. Padding grows them; nothing moves on desktop. * * ⚠️ `[class*="header"]` as well as `header`. Company Admin builds its top * bar out of `
` rather than a real `
` tag, so * its logo (34px) and its two Back links (32px) slipped straight past the * plain `header a` above. Same lesson as the tables and the grids. * * `a[class*="link"]` is there for the 437 tiny "Result" and "Input" download * pills in the super-admin job log, which were 22px. MEASURED THE COST * HONESTLY: each job row grows from 90px to 112px and the whole log gets * 21% longer (46,357px to 55,971px). Worth it — those pills are how you * fetch a customer's finished file, and at 22px you miss them. */ /* ⛔⛔ THIS RULE MUST NEVER SET `display`, AND HERE IS WHY. * It did, for one round, and it broke every tool that has a Download * button. mobile.css loads AFTER each page's own