/* ============================================================ mobile.css - Mobile-friendly override layer for the legacy fixed-width (778px) table layout. Loaded on every front-end page right after (injected into Include/* templates). All rules are scoped inside @media so desktop is untouched. Requires Js/mobile.js which marks wide tables with .m-stack. v2 (2026-09-02): fix whole-page breakage on real phones - - stack tbody/thead/tfoot too: without it the browser wraps block rows in anonymous tables, containing blocks break and max-width:100% stops working, so a 10,000,000px carousel track blew out the whole layout; - clamp the carousel track width; - pure-CSS fallback for table[width="778"] so the main frame stacks even if mobile.js fails to load. ============================================================ */ @media screen and (max-width: 768px) { html { -webkit-text-size-adjust: 100%; } html, body { overflow-x: hidden; } body { margin: 0; } /* ---------- fluid media ---------- */ body img { max-width: 100% !important; width: auto !important; height: auto !important; } /* ---------- legacy fixed widths -> fluid ---------- */ body table { max-width: 100% !important; } body td, body th { max-width: 100%; } body div { max-width: 100%; } .footer { width: auto !important; } .customerFavorites { width: auto !important; } .featureMessage { width: auto !important; } #html-carousel { width: 100% !important; } /* ---------- kill legacy fixed heights everywhere ---------- Old 778px layout sets td/tr/table height="NNN" for side-by- side cells. Once stacked, those dead heights keep holding space open -> huge blank gaps under photos and between sections. Let everything size to its content instead. */ body table, body tr, body td, body th { height: auto !important; } /* ---------- search box: don't stay 130px wide ---------- */ .searchText { width: auto !important; } /* ---------- carousel: clamp the 10,000,000px track ---------- The old carousel CSS gives UL.carousel-list a fixed 10,000,000px width; on phones that single rule used to blow the whole page sideways. Let items wrap instead. */ .carousel-component ul.carousel-list { width: auto !important; min-width: 0 !important; } .carousel-clip-region { width: 100% !important; } #prev-arrow-container, #next-arrow-container { display: none !important; } /* ---------- fluid form controls (16px stops iOS zoom) ---------- */ body input[type="text"], body input[type="password"], body input[type="tel"], body input[type="email"], body input.smalltextBox, body input.textBox, body select, body textarea { max-width: 100%; font-size: 16px; line-height: 1.3; } body input.smalltextBox { width: 55% !important; } body textarea { width: 96% !important; } /* ---------- stacked layout for wide tables ---------- CRITICAL: only the table's OWN direct rows/cells are blockified. A descendant selector here (table.m-stack td) would also smash NESTED tables - e.g. the vase-option grid on product pages (5 narrow columns that fits fine on a phone) got its rows/columns transposed: all images first, then all texts. Nested tables keep their table layout; if one of them is itself too wide, mobile.js marks it m-stack individually and it stacks on its own. tbody/thead/tfoot MUST be stacked together with tr/td, otherwise anonymous table wrappers break containing blocks and nothing constrains width any more. table[width="778"] is the site-wide main frame - it gets the same treatment straight from CSS as a no-JS fallback. */ table.m-stack, table.m-stack > tbody, table.m-stack > thead, table.m-stack > tfoot, table[width="778"], table[width="778"] > tbody, table[width="778"] > thead, table[width="778"] > tfoot { display: block !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; height: auto !important; } table.m-stack > tr, table.m-stack > tbody > tr, table.m-stack > thead > tr, table.m-stack > tfoot > tr, table[width="778"] > tr, table[width="778"] > tbody > tr, table[width="778"] > thead > tr, table[width="778"] > tfoot > tr { display: block !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; height: auto !important; } table.m-stack > tr > td, table.m-stack > tbody > tr > td, table.m-stack > thead > tr > td, table.m-stack > tfoot > tr > td, table.m-stack > tr > th, table.m-stack > tbody > tr > th, table.m-stack > thead > tr > th, table.m-stack > tfoot > tr > th, table[width="778"] > tr > td, table[width="778"] > tbody > tr > td, table[width="778"] > thead > tr > td, table[width="778"] > tfoot > tr > td { display: block !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; height: auto !important; padding-left: 3px; padding-right: 3px; } /* ---------- keep the delivery calendar intact ---------- The date-picker grid must stay tabular even when nested inside a stacked table. */ #DeliveryCalendarControl table, table.calendar, .calBorder table { display: table !important; } #DeliveryCalendarControl tr, table.calendar tr, .calBorder tr { display: table-row !important; } #DeliveryCalendarControl td, table.calendar td, .calBorder td { display: table-cell !important; width: auto !important; height: auto !important; } /* ---------- top navigation: tap-friendly pills ---------- */ #navcontainer, #navContainer, #navcontainer #nav, #navContainer #nav { height: auto !important; overflow: visible !important; } #navcontainer #nav > LI, #navContainer #nav > LI { float: none !important; display: inline-block !important; /* old CSS pins LI#Holiday at 25px - text (35px) spills out; auto height + real spacing between pills fixes both */ height: auto !important; margin: 2px 6px 2px 0 !important; } #navcontainer #nav > LI > A, #navContainer #nav > LI > A { display: inline-block !important; padding: 9px 10px !important; font-size: 14px !important; line-height: 1.2 !important; height: auto !important; } /* dropdowns expand in place instead of flying out */ #navcontainer LI UL, #navContainer LI UL { position: static !important; display: none !important; width: auto !important; margin-top: 0 !important; height: auto !important; } #navcontainer LI:hover UL, #navContainer LI:hover UL, #navcontainer LI.over UL, #navContainer LI.over UL { display: block !important; } #navcontainer LI UL LI, #navContainer LI UL LI { display: block !important; float: none !important; } #navcontainer LI UL LI A, #navContainer LI UL LI A { width: auto !important; padding: 8px 8px 8px 24px !important; font-size: 15px !important; } /* ---------- misc legibility ---------- */ .headermember, .headertime { font-size: 13px !important; } }