/* * mobile.css: phone layout repairs, loaded after every other theme stylesheet by * mu-plugins/fatboys-mobile.php. Measured on the live site 2026-10-27 (headless Chrome, * device emulation at 320x568, 360x800, 375x667, 390x844, 430x932, 768x1024, 844x390). * Every rule answers a measurement in deploy/mobile-2026-10-27/ (the plan file). * Breakpoints are the theme's own: 359 (shopfix), 360/374, 389 (counter.css), 560, 640, 767, 900. * Nothing here changes copy, markup, images or anything above 900px wide except the * landscape-phone block, which is height-gated. */ /* ---------- M1: inner-page masthead at 320-359 ---------- Measured 320x568: lockup 141px + call pill 146px + 12px gap + 36px padding = 335px in a 320px row, so the pill fell to its own row and the header was 245px, 43% of the screen. At 50px the lockup is 118px wide: 118 + 146 + 12 + 36 = 312. One row saved (53px). */ @media (max-width:359px){ .site-head .brand-lockup{height:50px} .site-head .head-call{padding:10px 12px;letter-spacing:.04em} } /* ---------- M2: inner-page nav at 360-374 ---------- Measured 360x800: the six links are 303px of boxes (three at the 44px floor) plus five 6px gaps = 333px in a 324px nav, so CART wrapped to a second row (header 192px, 24%). Four-pixel gaps and .05em tracking bring the row to about 315px. At 375 and up the nav already fits (339px); at 320 (284px) it cannot and still wraps, see the plan. */ @media (max-width:374px){ .site-head .site-nav{gap:6px 4px} .site-head .site-nav a{letter-spacing:.05em} } /* ---------- M3: home masthead at 320-360 ---------- Measured 360x800: brand 141 + call 171 + 12 + 36 = 360 in a 360px bar, so the call pill dropped to its own row (masthead 254px before the hero). A 13px pill with 12px side padding is about 151px: 141 + 151 + 12 + 36 = 340. At 320 the lockup drops to 50px as on the inner pages: 118 + 147 + 12 + 36 = 313. Selector depth matches counter.css line 108 (.ct-page .ct-top .ct-call, 0,3,0) and line 99 (the lockup, 0,5,0) so this file wins by order. */ @media (max-width:360px){ .ct-page .ct-top .ct-bar-in .ct-call{font-size:13px;padding:12px 12px} } @media (max-width:359px){ .ct-page .ct-top .ct-bar-in .ct-brand .ct-lockup{height:50px} .ct-page .ct-top .ct-bar-in .ct-call{padding:12px 10px} } /* ---------- M4: the /shop/ search field under 390 ---------- Measured: the input was 108px wide at 320, 148 at 360, 163 at 375 beside Search and Filters; the placeholder "Search the counter" needs 172px, so it read "Search t" at 320. The label above the field repeats the placeholder word for word, so it goes to screen readers only. The rows are: live count, the field on its own, then Search, Filters and Clear sharing one row. Clear used to sit in the count row, which grew from 17px to 44px on the first keystroke (bar 134 -> 161, verifier 2026-10-28); in the button row it only takes width, so the bar keeps one height while the customer types. .shop-nav__top and .shop-nav__field become display:contents so their children can be ordered in one flow, the way shop-nav.css already does for .shop-nav__top at 768 and up. Category and search-result bars (.shop-nav--archive) have no Filters button and their input is already 195px+ at 320, so they keep one row. */ @media (max-width:389px){ .shop-nav:not(.shop-nav--archive) .shop-nav__search{flex-direction:row;flex-wrap:wrap;gap:4px 8px} .shop-nav:not(.shop-nav--archive) .shop-nav__top, .shop-nav:not(.shop-nav--archive) .shop-nav__field{display:contents} .shop-nav:not(.shop-nav--archive) .shop-nav__count{order:0;flex:1 1 100%} .shop-nav:not(.shop-nav--archive) .shop-nav__input{order:1;flex:1 1 100%} .shop-nav:not(.shop-nav--archive) .shop-nav__btn{order:2;flex:1 1 0;padding:0 10px} .shop-nav:not(.shop-nav--archive) .shop-nav__toggle{order:3;flex:1 1 0;padding:0 10px} .shop-nav:not(.shop-nav--archive) .shop-nav__clear{order:4;flex:1 1 0;padding:0 10px} } /* ---------- M5: the category-page bar is not sticky on a phone ---------- Measured 375x812 on /product-category/angus-beef/: the bar (label row, field row, "Shop the whole counter" row) is 161px and sticks at top:0 while the grid scrolls: 20% of a 812 screen, 28% of a 568 one. It carries a plain search form and a link, no live filter, no jump pills, so nothing needs it pinned. Static below 768 (the width where shop-nav.css lays the bar out as one row). The label row goes the same way as M4, so the bar is 133px in the flow. The visible label is screen-reader-only on EVERY shop bar below 768 (M4's reason: it repeats the placeholder; label for=shop-q still names the field). On /shop/ at 390-767 that also stops the first keystroke growing the bar 109 -> 130 (verifier round 2): with the label gone the count and Clear share the 44px top row. */ @media (max-width:767px){ .shop-nav--archive{position:static;box-shadow:none} .shop-nav--archive .shop-nav__top{min-height:0} .shop-nav__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} } /* ---------- M6: the gallery zoom trigger is 36x36 (44px floor) ---------- WooCommerce's own rule (woocommerce.css, 0,3,2): 36px circle, icon drawn by ::before/::after at fixed offsets. Same selector, 44px, icon offsets moved 4px so it stays centred. Touch screens only (the pointer rule woo.css already uses for the buy button). */ @media (pointer:coarse){ .woocommerce div.product div.images .woocommerce-product-gallery__trigger{width:44px;height:44px} .woocommerce div.product div.images .woocommerce-product-gallery__trigger::before{top:13px;left:13px} .woocommerce div.product div.images .woocommerce-product-gallery__trigger::after{top:23px;left:26px} } /* ---------- M7: /shop/ section headings are links 30px tall ---------- Measured 390: "Bulk Packs" 147x30, "Sausages, Mince & ..." 404x30 (h2 a, inline). The link stays exactly as it was (inline; its hover and focus underline is its own border-bottom, woo.css D1.4). An earlier inline-block version made each h2 3px taller and pulled that underline in from 3px to 1.4px under the letters (verifier 2026-10-28), so the tap layer hangs off the h2 instead: the h2 is the positioned box, the link's ::after fills it plus 11px above and below, and a tap anywhere in that band is a tap on the link. The h2 holds only the link (archive-product.php), so the band never covers anything else. */ .shop-section__head h2{position:relative} .shop-section__head h2 a::after{content:"";position:absolute;top:-11px;right:0;bottom:-11px;left:0} /* ---------- M10: inner-page nav labels break into two lines on a tablet ---------- Measured 768x1024 (and 812x375, 844x390 before M9): nav labels BULK PACKS and VISIT US rendered on two lines inside their 44px boxes ("BULK / PACKS"), because the 88px lockup (207px wide), the call pill and the row gaps left the six links 308px for 350px of text. site-counter.css already treats 561-840 as the squeezed band. With the 60px lockup (141px wide), 4px gaps and .07em tracking the row needs about 361px, 387px with a cart badge, in the 399px it has at 768. Below 768 that cannot hold, so the nav takes its own row there exactly as mockup.css does at 560 and under. The labels are nowrap, so the row itself may wrap: if Safari's wider font metrics ever overrun 768-919, the nav drops to a second row instead of the page scrolling sideways. The band runs to 919, not 840: the labels still broke at 841-915 (Galaxy Fold 884, narrow desktop windows; verifier rounds 1 and 2, 2026-10-28) and are clean from 920 with 26px to spare. */ @media (min-width:561px) and (max-width:919px){ .site-head .head-row{flex-wrap:wrap} .site-head .brand-lockup{height:60px} .site-head .site-nav{gap:4px} .site-head .site-nav a{white-space:nowrap;letter-spacing:.07em} } @media (min-width:561px) and (max-width:767px){ .site-head .head-row{flex-wrap:wrap;row-gap:9px} .site-head .site-nav{order:3;width:100%;margin-left:0;justify-content:space-between;border-top:1px solid rgba(244,241,232,.10);padding-top:9px} .site-head .head-call{margin-left:auto} } /* ---------- M8: the Google rating line on the home page ---------- Measured 320: .fb-stars is a nowrap flex row (score, stars, link), so the link "on Google, from 27 reviews, as at October 2026" was squeezed to 84px wide and 154px tall (six lines); at 390 it was 154x77. At 768 and up it is one 27px line (44px floor). Wrap on phones so the link takes its own row; 10px of vertical padding everywhere (9px measured 43.6px at 414-640, under the floor). */ .ct-page .fb-stars .fb-stars__link{padding:10px 0} @media (max-width:640px){ .ct-page .fb-stars{flex-wrap:wrap} .ct-page .fb-stars .fb-stars__link{flex:1 1 100%} } /* ---------- M9: landscape phones ---------- Measured 844x390: the inner-page header is 107px (27% of the height) with the 88px lockup; the home masthead is 206px (53%): counter.css wraps .ct-bar-nav onto its own row up to 900px wide, which is every landscape phone. Height-gated so tablets and desktops never see it. Home bar at 844: brand 207 + nav about 365 + call about 140 + two 12px gaps = 736 in 770. The call keeps the home page's 13px floor, and its margin-left:auto (counter.css, up to 900px) is reset so the nav, not the free space, sits against it. */ @media (max-height:500px) and (orientation:landscape){ .site-head .brand-lockup{height:60px} .ct-page .ct-top .ct-bar-in .ct-brand .ct-lockup{height:60px} } @media (min-width:768px) and (max-width:900px) and (max-height:500px) and (orientation:landscape){ .ct-bar-in{gap:12px} .ct-bar-nav{order:0;width:auto;margin-left:auto;border-top:0;padding-top:0;gap:8px} .ct-page .ct-top .ct-bar-in .ct-call{margin-left:0;padding:10px 12px;letter-spacing:.04em} } /* Landscape phones 561-767 wide (667x375 iPhone 8/SE, 740x360 Galaxy): M10 puts the inner nav on its own row below 768, which in landscape made the header 142px, 38% of the screen (verifier 2026-10-28). Height-gated: the nav goes back into the logo row with the 50px lockup and tighter tracking. Measured at 667: lockup 118 + nav 341 + call 136 + two 12px gaps + 2 x 29px padding = 678, 11px over, so the call wrapped and the header was still 122px. With 16px side padding and 10px gaps it is 647. The row may still wrap (M10), so a cart badge or Safari metrics degrade to a second row, never to sideways scroll; on one row the nav's margin-left:auto takes the free space, so justify-content only acts when the call pill has wrapped, and puts it at the right rather than alone at the left. */ @media (min-width:561px) and (max-width:767px) and (max-height:500px) and (orientation:landscape){ .site-head .head-row{padding-left:16px;padding-right:16px;column-gap:10px;justify-content:flex-end} .site-head .brand-lockup{height:50px} .site-head .site-nav{order:0;width:auto;margin-left:auto;border-top:0;padding-top:0;justify-content:flex-end} .site-head .site-nav a{letter-spacing:.05em} .site-head .head-call{margin-left:0} } /* ---------- M11: landscape phones 561-646 wide: the call button becomes a phone icon ---------- 568x320 (iPhone SE 1st gen) and 640x360 (every 360-wide Android sideways): lockup 118 + nav 341 + "Call 0494 103 084" 136 + gaps 20 + padding 32 = 647, so the call button wrapped and the header was 122px (34-38% of the screen; verifier round 2). As a 44px phone icon the row is 555 and fits from 561. Owner 2026-10-28 ("do what you can to fix this stuff"). The words stay in the link (font-size 0, not removed), so screen readers still read the number and a tap still dials it; the footer shows the number in full. Everywhere else: unchanged. */ @media (min-width:561px) and (max-width:646px) and (max-height:500px) and (orientation:landscape){ .site-head .head-call{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;padding:0;font-size:0;letter-spacing:0} .site-head .head-call::before{content:"";display:block;width:20px;height:20px;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.25 1.01l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.25 1.01l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat} } /* ---------- M12: CART on its own row at 320-359 ---------- The six links measure 303px plus five gaps in a 284px nav at 320, so CART wrapped onto a second row on every page (verifier round 1; it cannot fit at this type size). Owner 2026-10-28 ("do what you can to fix this stuff"): under 360 the header drops About, the least-needed link for someone shopping on a small phone, and it stays in the footer on every page. Same move counter.css already makes for the home page's sausage link under 390. */ @media (max-width:359px){ .site-head .site-nav a[href$="/about/"], .ct-page .ct-bar-nav a[href$="/about/"]{display:none} } /* ---------- M13: the delivery note above the products, phones ---------- .fb-fulfil-note (fatboys-delivery.php) is the biggest block between a shop or category heading and the first product: 203px at 390, 247px at 320. Its code says the fees must be read before a basket starts, so every word stays and nothing folds away; the type and the box are tightened to the site's phone body size instead (woo.css: .93rem / 1.5, 11px 15px). */ @media (max-width:767px){ .fb-fulfil-note{padding:9px 12px;font-size:.875rem;line-height:1.4} } /* 320: still 216px at 14px type; 13px (the home page's legibility floor, counter.css) and 10px side padding. */ @media (max-width:359px){ .fb-fulfil-note{padding:8px 10px;font-size:13px;line-height:1.38} }