/* ============================================================ QLX EMU mobile layer (v3, expanded 2026-08-22) Mobile-only (<=767px). Desktop is completely unaffected. Goal: make the Sendy admin actually usable on a phone. ============================================================ */ @media only screen and (max-width: 767px) { /* --- no whole-page sideways scrolling --- */ html, body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; } img, iframe { max-width: 100%; height: auto; } body { font-size: 15px; } /* --------------------------------------------------------- CORE FIX: stack the Bootstrap fluid grid. On desktop span2 (sidebar) + span10 (content) sit side by side; on a phone that squishes both. Force every span to full width and stack vertically. --------------------------------------------------------- */ .row-fluid { width: 100% !important; } .row-fluid > [class*="span"], .container [class*="span"] { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; float: none !important; box-sizing: border-box; /* NB: intentionally NOT forcing display:block, so Sendy's own mobile.css can still hide the brands-page sidebar (span2) via display:none. */ } /* --- containers use the whole screen --- */ .container, .container-fluid { padding-left: 10px !important; padding-right: 10px !important; width: auto !important; } .row, .row-fluid { margin-left: 0 !important; } /* --- sidebar becomes a full-width block above the content --- */ .sidebar, .span2 { margin-bottom: 16px !important; } .sidebar-box { width: auto !important; max-width: 100% !important; box-sizing: border-box; margin: 0 0 14px 0 !important; } .sidebar .nav, .sidebar ul { width: 100% !important; } /* --------------------------------------------------------- FORMS: full-width, tappable inputs (compose, send, login) --------------------------------------------------------- */ input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], textarea, select, .input-xlarge, .input-large, .input-block-level, .form-control, .uneditable-input { width: 100% !important; max-width: 100% !important; box-sizing: border-box; font-size: 16px !important; /* >=16px stops iOS zoom-on-focus */ } .controls, .control-group, .form-horizontal .controls { margin-left: 0 !important; } .form-horizontal .control-label { float: none !important; width: auto !important; text-align: left !important; padding-top: 0 !important; } /* --- buttons: comfortable tap targets, wrap nicely --- */ .btn { padding: 10px 14px !important; font-size: 15px !important; } .btn-group { display: flex !important; flex-wrap: wrap !important; gap: 6px; } .btn-group > .btn { border-radius: 4px !important; } /* --------------------------------------------------------- TABLES: scroll inside their own box, never stretch the page --------------------------------------------------------- */ .table:not(.responsive) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; } .table-wrap, .tablesorter { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* --------------------------------------------------------- TOP BAR / NAV / brand: wrap instead of overflowing --------------------------------------------------------- */ .navbar .brand, .navbar-inner { float: none !important; } .navbar .nav, .nav.pull-right, .navbar .nav > li { float: none !important; display: block !important; } .navbar .container, .navbar .container-fluid { padding: 6px 10px !important; } h1, h2, .page-header h1 { font-size: 22px !important; line-height: 1.25 !important; word-wrap: break-word; } /* --------------------------------------------------------- CALENDAR + popups fit the screen --------------------------------------------------------- */ #calendar_prev, #calendar_curr, #calendar_next { max-width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* the day popup is position:absolute inside the calendar column; on the phone's two-column layout that clips it invisible. Lift it to a fixed full-screen overlay. */ #data_popup { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 3000 !important; } #data_popup > div { left: 4% !important; width: 92% !important; margin-left: 0 !important; min-height: 0 !important; top: 8% !important; } .date_popup_wrap { max-width: 90vw !important; } /* --- modals fit the viewport --- */ .modal { width: 94% !important; left: 3% !important; margin-left: 0 !important; top: 3% !important; max-height: 92vh; overflow: auto; } /* --- dropdowns (month/year selects, brand pickers) --- */ select.dropdown, select.month_dropdown, select.year_dropdown { width: auto !important; min-width: 90px; height: auto !important; } /* --- stat / metric rows wrap --- */ .stats, .row-stats, .dashboard-stats { display: block !important; } .stats > *, .dashboard-stats > * { width: 100% !important; margin: 0 0 10px 0 !important; } /* --- wide inline-styled boxes that force big min-widths --- */ [style*="width: 664px"], [style*="width:664px"] { width: 100% !important; max-width: 100% !important; } /* --------------------------------------------------------- BRAND SWITCHER + nav dropdowns: full-width readable panel, no more truncated "Adr" / "Ank" names. --------------------------------------------------------- */ .dropdown-menu { position: absolute !important; left: 3vw !important; right: 3vw !important; width: 94vw !important; max-width: 94vw !important; min-width: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; white-space: normal !important; border-radius: 10px !important; box-shadow: 0 12px 40px rgba(0,0,0,.25) !important; } .dropdown-menu li { width: 100% !important; } .dropdown-menu li > a { display: block !important; width: 100% !important; box-sizing: border-box !important; white-space: normal !important; /* let brand names wrap, not clip */ overflow: visible !important; text-overflow: clip !important; padding: 12px 16px !important; font-size: 15px !important; line-height: 1.3 !important; } .dropdown-menu li > a img { flex: 0 0 auto; } /* the brand list has an inline max-height; keep it scrollable and wide */ .dropdown-menu[style*="max-height"] { max-height: 60vh !important; } /* search box inside the brand menu goes full width, no overlap */ .dropdown-menu input[type=text], .dropdown-menu .search-query, .brand-search, #brand_search { width: 100% !important; box-sizing: border-box !important; margin: 6px 0 !important; } /* =========================================================== RESPONSIVE-TABLES PLUGIN FIX Sendy uses ZURB responsive-tables.js, which on phones clones the table and pins ONLY the first column into a 35%-wide overflow:hidden strip (the truncated "Adr / Ank" column) and shoves the real table into an empty scroll area beside it. Kill that behaviour entirely so tables are readable. =========================================================== */ /* the plugin's .scrollable is an overflow:scroll box that shrink-wraps to its content (~180px) instead of filling the row. Force the whole wrapper chain to a plain full-width block so nothing collapses. */ .table-wrapper, .table-wrapper .scrollable { display: block !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important; position: static !important; overflow: visible !important; } .table-wrapper .pinned { display: none !important; } /* remove the cloned narrow strip */ .table-wrapper .scrollable table { margin-left: 0 !important; } /* undo the 35% shove */ table.responsive td, table.responsive th { white-space: normal !important; overflow: visible !important; } /* ----------------------------------------------------------- BRANDS HOME (#brands-table): 8-column table -> clean cards. One card per brand: logo + name as the title, then the useful actions. Noise columns hidden on phone. ----------------------------------------------------------- */ /* remove the stray empty "Search brands / Search campaigns" white-boxes on mobile */ form.form-search { display: none !important; } #brands-table, #brands-table tbody { display: block !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; } #brands-table thead { display: none !important; } #brands-table tr { display: block !important; width: -webkit-fit-content !important; width: fit-content !important; min-width: 240px !important; max-width: 100% !important; border: 1px solid #e2e6ee !important; border-radius: 12px !important; margin: 0 0 12px !important; padding: 12px 14px !important; background: #fff !important; box-shadow: 0 1px 3px rgba(0,0,0,.05) !important; box-sizing: border-box !important; } #brands-table td { display: block !important; border: none !important; white-space: normal !important; overflow: visible !important; padding: 4px 0 !important; text-align: left !important; width: auto !important; } /* hide low-value columns on phone: ID(1), Sends via(3), Sending limits(5), Used(6) */ #brands-table td:nth-child(1), #brands-table td:nth-child(3), #brands-table td:nth-child(5), #brands-table td:nth-child(6) { display: none !important; } /* CARD (Safari-safe, standard block/inline stacking only): name / four quick-link icons / % on its OWN line / edit + delete. */ #brands-table tr { display: block !important; } /* LINE 1: brand name */ #brands-table td:nth-child(2) { display: block !important; font-size: 16px !important; font-weight: 600 !important; color: #1a2c49 !important; padding: 0 0 10px 0 !important; margin: 0 0 10px 0 !important; border-bottom: 1px solid #eef0f4 !important; } #brands-table td:nth-child(2) img { width: 20px !important; height: 20px !important; vertical-align: middle; margin-right: 8px; } #brands-table td:nth-child(2) p { margin: 0 !important; } #brands-table td:nth-child(2) a { float: none !important; display: inline-flex !important; align-items: center; gap: 8px; line-height: 1.25; } /* The quick-links cell is a plain BLOCK (Safari ignores display:flex on a ). The icon s are inline-flex boxes that flow in a row; the % is display:block, which forces it onto its own line. Flex lives only on the icons (Safari honors that). */ /* The action cells are display:inline -> they stop generating their own boxes, so the icon s (which ARE reliable as inline-flex) flow in one row, and the block-level % cleanly breaks onto its own line. No block/flex behavior relied on anywhere. */ /* quick-links cell = block (its inner % element then breaks onto its own line); edit + delete cells = inline, so their icons sit together on the row below. */ #brands-table td:nth-child(4) { display: block !important; margin: 0 !important; padding: 0 !important; } #brands-table td:nth-child(7), #brands-table td:nth-child(8) { display: inline !important; margin: 0 !important; padding: 0 !important; } /* NOTE: col4's icons + % are wrapped in a

, so selectors must go THROUGH it. The

is NOT a table element, so Safari honors grid on it: icons auto-place on row 1, the % is forced onto its own full-width row below. */ #brands-table td:nth-child(4) p { margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(4, max-content) !important; gap: 7px !important; align-items: center; justify-content: start; } /* small equal icon buttons: the 4 quick-links (inside the

) + edit + delete cells */ #brands-table td:nth-child(4) p > a:nth-of-type(-n+4), #brands-table td:nth-child(7) > a, #brands-table td:nth-child(8) > a { display: inline-block !important; vertical-align: middle; padding: 8px 10px !important; margin: 0 !important; line-height: 1 !important; border: 1px solid #e2e6ee !important; border-radius: 7px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(0,0,0,.04) !important; color: #33415c !important; } /* edit + delete keep the same 7px rhythm as the grid gap */ #brands-table td:nth-child(7) > a, #brands-table td:nth-child(8) > a { margin: 7px 7px 0 0 !important; } /* the "% opened" / "No campaigns yet" link (5th in the

) -> its OWN line. Sendy floats the pie + text inside it (all.css .pie_open_rate/.open_rate_no float:left), which collapses the link's height and lets it ride up beside the icons. overflow:hidden makes the link CONTAIN its floats, and display:block puts it on its own line, keeping its bordered pill box. */ #brands-table td:nth-child(4) p > a:nth-of-type(n+5), #brands-table td:nth-child(4) p > a:last-of-type, #brands-table td:nth-child(4) p > a[title*="View report"], #brands-table td:nth-child(4) p > a[title*="Create new campaign"] { grid-column: 1 / -1 !important; /* own full-width grid row under the icons */ justify-self: start !important; /* compact box, not stretched */ display: block !important; overflow: hidden !important; /* contain Sendy's floated pie + text */ margin: 0 !important; padding: 7px 12px !important; border: 1px solid #e2e6ee !important; border-radius: 8px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(0,0,0,.04) !important; white-space: nowrap; } /* the outer fixed-height scroll box should just grow on phone (its overflow:auto was another shrink-context); make it a plain full-width block */ [style*="max-height:calc(100vh"] { max-height: none !important; overflow: visible !important; border: none !important; width: 100% !important; min-width: 100% !important; display: block !important; } /* =========================================================== APP / CAMPAIGNS LIST PAGE - kill the leftover debug blue background behind the list - turn the campaigns table into cards (with the campaign name as the title, which was being hidden on mobile) =========================================================== */ #campaignslist { background-color: transparent !important; } #sortableTable { margin-top: 12px !important; } #sortableTable, #sortableTable tbody { display: block !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; } #sortableTable thead { display: none !important; } #sortableTable tr { display: block !important; width: 100% !important; border: 1px solid #e2e6ee !important; border-radius: 12px !important; margin: 0 0 12px !important; padding: 12px 14px !important; background: #fff !important; box-shadow: 0 1px 3px rgba(0,0,0,.05) !important; box-sizing: border-box !important; } #sortableTable td { display: block !important; border: none !important; white-space: normal !important; overflow: visible !important; padding: 4px 0 !important; text-align: left !important; width: auto !important; } /* campaign name (col 1) = card title (un-hide it, the plugin hid it) */ #sortableTable td:nth-child(1) { display: block !important; font-size: 16px !important; font-weight: 600 !important; color: #1a2c49 !important; padding-bottom: 10px !important; margin-bottom: 8px !important; border-bottom: 1px solid #eef0f4 !important; } /* label the bare stat cells so they read clearly */ #sortableTable td:nth-child(2)::before { content: "Recipients: "; color: #8a94a6; font-weight: 600; } #sortableTable td:nth-child(3)::before { content: "Sent: "; color: #8a94a6; font-weight: 600; } /* actions: duplicate(6) + delete(7) sit inline at the bottom */ #sortableTable td:nth-child(6), #sortableTable td:nth-child(7) { display: inline-block !important; margin: 8px 16px 0 0 !important; vertical-align: middle; } /* =========================================================== MOBILE HOME BUTTON (fixed top-left of the navbar) -> EMU home Present on every page. Hidden on desktop via inline display:none. =========================================================== */ /* NAVBAR: lay the banner out with flexbox so it never collapses and the order is reliably [EMU logo] [Brands] ........ [Arun Johari]. */ /* bootstrap-responsive yanks the fixed navbar 60px up off-screen on mobile (Sendy hides the nav on phones by default) -> bring it back and pin it. */ .navbar-fixed-top { margin-top: 0 !important; position: sticky !important; top: 0 !important; z-index: 1040 !important; } .navbar .navbar-inner { min-height: 52px !important; } .navbar .navbar-inner .container-fluid { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 52px !important; padding: 0 10px !important; gap: 8px; } .navbar .brand { display: none !important; } /* redundant gravatar link */ .navbar .btn-navbar { display: none !important; } /* useless empty hamburger */ .navbar .nav-collapse { display: none !important; } /* empty */ /* EMU-logo home button on the far left; links to EMU home on every page */ .qlx-mhome { display: inline-flex !important; align-items: center; justify-content: center; float: none !important; order: 0; flex: 0 0 auto; margin: 0 !important; padding: 4px !important; background: #fff !important; border-radius: 9px; text-decoration: none !important; box-shadow: 0 1px 4px rgba(0,0,0,.2); } .qlx-mhome img { height: 28px !important; width: auto !important; display: block; } .qlx-mhome { padding: 4px 8px !important; } .qlx-mhome:active { background: #eef1f6 !important; } /* dropdowns: Arun (1st in DOM) pushed to the far right, Brands (2nd) next to the logo */ .navbar .container-fluid .btn-group { float: none !important; order: 2; margin: 0 !important; } .navbar .container-fluid .btn-group ~ .btn-group { order: 1; margin: 0 !important; } /* "Add a new brand": left-aligned block (not floated, so its container keeps height and the 30px gap below it survives before the first brand card) */ button[onclick*="new-brand"] { float: none !important; display: block !important; width: fit-content !important; margin: 0 auto 22px 0 !important; } /* tidy the campaign filter buttons (were scattered fixed-width white boxes) */ #all, #draft, #scheduled, #sent { width: auto !important; min-width: 0 !important; margin: 0 6px 8px 0 !important; display: inline-block !important; } /* LOGIN: guarantee readable button text (was invisible on iOS Safari) */ .btn:not(.btn-inverse) { color: #333 !important; text-shadow: none !important; } /* =========================================================== TWO-COLUMN PHONE LAYOUT (.qlx-cols on index + brand page): compact square calendar LEFT, content RIGHT in its own scroll area, so the whole page fits one phone screen. =========================================================== */ .qlx-cols { display: flex !important; gap: 10px; align-items: flex-start; } .qlx-cols > .span2 { flex: 0 0 45% !important; width: 45% !important; max-width: 45% !important; display: flex !important; flex-direction: column; margin: 0 !important; } .qlx-cols > .span10 { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-height: calc(100vh - 140px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-left: 4px; } /* the LEFT column scrolls internally too, so the page itself never scrolls */ .qlx-cols > .span2 { max-height: calc(100vh - 140px); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* brand page: current month only; the menu + campaigns take the freed space */ .qlx-brand #calendar_next { display: none !important; } /* compact, left-aligned controls in the content column (create+send, filters, rss) */ .qlx-cols > .span10 .btn { padding: 7px 11px !important; font-size: 13px !important; white-space: nowrap; } .qlx-cols #all, .qlx-cols #draft, .qlx-cols #scheduled, .qlx-cols #sent { padding: 7px 10px !important; font-size: 13px !important; margin: 0 6px 6px 0 !important; } .qlx-cols .campaigns-rss-btn { float: none !important; margin: 0 0 6px 0 !important; } /* navbar pills: one line, no caret wrap, brand name ellipsizes instead of ballooning */ .navbar .container-fluid .btn-group .btn { white-space: nowrap !important; padding: 8px 10px !important; font-size: 14px !important; max-width: 44vw; overflow: hidden; text-overflow: ellipsis; } /* left column order: selects + current month first; menu below; quota hidden on home */ .qlx-cols > .span2 > * { order: 1; } .qlx-cols > .span2 > .sidebar-nav { order: 2; width: auto !important; max-width: 100% !important; } .qlx-home > .span2 > .sidebar-nav { display: none !important; } .qlx-cols #calendar_prev { display: none !important; } /* next month shows under the current one (brand page carries an inline hide for desktop) */ .qlx-cols #calendar_next { display: block !important; margin-top: 10px; } /* compact SQUARE calendar with a clean outer edge. REAL structure (style.css): the calendar is a FLOATED