/* ========================================================================== responsive.css - Mobile/Tablet corrections (iPhone, iPad, Android) Loaded after custom.css - overrides theme + custom rules for small screens and touch devices. Breakpoint/feature strategy: (hover: none) and (pointer: coarse) -> any touch device (iPhone, iPad) max-width: 767.98px -> phones 768px - 1199.98px -> tablets / iPad ========================================================================== */ /* -------------------------------------------------------------------------- 1. Base - stop horizontal page scroll and iOS text auto-inflation -------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } /* Applied to only: while stays overflow:visible this propagates to the viewport without turning any element into a nested scroll container (which would clip dropdowns and add a second scrollbar). */ body { overflow-x: hidden; } .ms-site-container { max-width: 100%; } /* Never let a single long word (ids, urls, mails) blow up the layout */ p, h1, h2, h3, h4, h5, h6, td, th, li, dd, dt, .card-title, address { overflow-wrap: break-word; word-wrap: break-word; } /* Images must never exceed their column */ img { max-width: 100%; } /* -------------------------------------------------------------------------- 2. iOS: prevent the "auto zoom on focus" trap Safari zooms the viewport whenever a focused form control uses a font smaller than 16px. Because the page is no longer locked with user-scalable=no, the user could zoom back out - but preventing the zoom in the first place is what keeps the layout stable. -------------------------------------------------------------------------- */ @media (hover: none) and (pointer: coarse) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .form-control, .custom-select, .bootstrap-select .form-control, .bs-searchbox .form-control { font-size: 16px !important; } } /* -------------------------------------------------------------------------- 3. Touch feedback NOTE: `body { cursor: pointer }` is deliberately NOT used here. It is the usual trick to make iOS dispatch click events on non-interactive elements so that a tap outside closes a Bootstrap dropdown - but it also routes far more taps into Bootstrap's document-level _clearMenus handler, which makes an "open menu closes by itself" problem worse rather than better. -------------------------------------------------------------------------- */ @media (hover: none) and (pointer: coarse) { /* Do not leave sticky :hover styling behind after a tap */ a:hover, .btn:hover, .btn-circle:hover, .dropdown-item:hover { -webkit-tap-highlight-color: rgba(0, 0, 0, .08); } } /* -------------------------------------------------------------------------- 4. Touch targets - 44px minimum (Apple HIG) -------------------------------------------------------------------------- */ @media (hover: none) and (pointer: coarse) { .btn, .btn-circle, .dropdown-item, .ms-slidebar-menu a, .navbar-nav .nav-link, .page-link, .close { min-height: 44px; } .btn-circle { min-width: 44px; } .dropdown-item, .ms-slidebar-menu a { display: flex; align-items: center; padding-top: 10px; padding-bottom: 10px; line-height: 1.4; } .close { min-width: 44px; padding: 0 12px; } /* Table action links need room for a fingertip */ .table td a:not(.btn):not(.btn-circle) { display: inline-block; padding: 8px 4px; } } /* -------------------------------------------------------------------------- 5. Native selects and the "adjusted" input groups The fixed 30px height from custom.css is unusable on touch and forced a sub-16px font (see section 2). Height is released on small screens. -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .custom-select-adjusted, .input-group-adjusted { height: auto; min-height: 44px; font-size: 16px; } .input-width-fixed { width: auto; } /* Stack "label + select" permission rows instead of squeezing them. Scoped to .rights-group so ordinary input groups (login/register, which use .input-group-addon icons) keep their inline layout. */ .input-group.rights-group { margin-bottom: 1.5rem !important; } .input-group.rights-group > .input-group-prepend, .input-group.rights-group > .input-group-prepend > .input-group-text, .input-group.rights-group > .custom-select { flex: 0 0 100%; width: 100%; max-width: 100%; } .input-group.rights-group > .input-group-prepend > .input-group-text { justify-content: flex-start; border-radius: 4px 4px 0 0; } .input-group.rights-group > .custom-select { border-radius: 0 0 4px 4px !important; } } /* Native select on iOS renders its own chevron - keep ours from overlapping */ @media (hover: none) and (pointer: coarse) { select.custom-select, select.form-control { padding-right: 2rem; } } /* -------------------------------------------------------------------------- 6. bootstrap-select (.selectpicker) on touch devices Sizing/legibility only. Nothing here may affect where the menu is placed - the widget positions it itself and fighting that is what pinned the menu to the top-left of the page previously. -------------------------------------------------------------------------- */ .bootstrap-select { max-width: 100%; } .bootstrap-select > .dropdown-toggle { white-space: normal; text-align: left; } @media (hover: none) and (pointer: coarse) { /* The closed control itself */ .bootstrap-select > .dropdown-toggle { min-height: 44px; font-size: 16px; padding-top: 10px; padding-bottom: 10px; } .bootstrap-select .dropdown-menu .inner { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .bootstrap-select .dropdown-menu li a { min-height: 44px; display: flex; align-items: center; font-size: 16px; padding: 10px 16px; white-space: normal; } /* Live-search box */ .bs-searchbox { padding: 8px 12px; } .bs-searchbox .form-control { min-height: 44px; } } /* -------------------------------------------------------------------------- 7. Navbar + language dropdown -------------------------------------------------------------------------- */ /* Right-align the language menu so it cannot hang off the viewport edge */ .ms-navbar .nav-item .dropdown-menu { right: 0; left: auto; max-width: calc(100vw - 24px); } .ms-navbar .nav-item .dropdown-menu .dropdown-item img { margin-right: 8px; } /* iPad portrait: the expanded navbar has to fit search + basket + admin + language. Tighten spacing and drop the breadcrumb (it is repeated in the page heading anyway). */ @media (min-width: 768px) and (max-width: 1199.98px) { .ms-navbar .navbar-collapse .navbar-nav .nav-item > .nav-link, .ms-navbar .navbar-collapse .navbar-nav .nav-item > a { padding-left: 8px !important; padding-right: 8px !important; } .ms-navbar .navbar-collapse .navbar-nav .nav-item .btn-circle { margin-right: 4px !important; } } /* -------------------------------------------------------------------------- 8. Slidebar (mobile main menu) -------------------------------------------------------------------------- */ /* Do NOT override .ms-slidebar's width here. The theme hides the panel with a hard-coded offset that must equal its width (width:300px / left:-300px), so widening it alone leaves the difference visible on screen. */ @media (max-width: 767.98px) { .sb-slidebar-container { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } } /* The slidebar header sits on a dark background image and the theme colours its links white explicitly - anything added here must do the same. */ .ms-slidebar-lang { padding: 10px 20px 16px; color: #fff; } .ms-slidebar-lang .ms-slidebar-lang-title { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; opacity: .7; margin-bottom: 6px; } .ms-slidebar-lang a { display: inline-flex; align-items: center; min-height: 40px; margin-right: 12px; color: #fff; } /* Login / Profil / Ausloggen buttons: the theme's 10px padding leaves them a few pixels under the 44px touch minimum. */ @media (hover: none) and (pointer: coarse) { .ms-slidebar .ms-slidebar-header .ms-slidebar-login a { padding-top: 13px; padding-bottom: 13px; } } .ms-slidebar-lang a img { margin-right: 6px; } .ms-slidebar-lang a.disabled { opacity: .5; pointer-events: none; } /* -------------------------------------------------------------------------- 9. Tables - horizontal scrolling instead of breaking the page layout .table-responsive wrappers are added by mobile.js for every .table that does not already have one. -------------------------------------------------------------------------- */ .table-responsive { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } @media (max-width: 767.98px) { .table td, .table th { padding: 10px 8px; vertical-align: middle; } /* Keep action columns from wrapping mid-word */ .table td a:not(.btn) { white-space: nowrap; } } /* -------------------------------------------------------------------------- 10. Modals (basket, search, add-to-basket) -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .modal-dialog, .modal-dialog.modal-sm, .modal-dialog.modal-lg { margin: 8px; max-width: none; width: auto; } .modal-body { max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .modal-footer { flex-wrap: wrap; } .modal-footer .btn { flex: 1 1 auto; } } @media (hover: none) and (pointer: coarse) { .modal-body textarea, .modal-body input.form-control { min-height: 44px; font-size: 16px; } #orderText { min-height: 90px; } } /* -------------------------------------------------------------------------- 11. Cards, hero and product images -------------------------------------------------------------------------- */ /* custom.css pins .img-product to 225px which distorts/overflows on phones */ @media (max-width: 767.98px) { .img-product { height: auto; max-height: 200px; width: auto; max-width: 100%; } .ms-hero-page-override .ms-site-title, .ms-site-title-lg { font-size: 1.75rem; line-height: 1.2; } .ms-hero-page-override .lead-lg { font-size: 1rem; } /* Bootstrap nests .container inside .container in several views - remove the duplicated gutter so content is not squeezed */ .container .container, .card-body > .container, fieldset.container { padding-left: 0; padding-right: 0; max-width: 100%; } .card-body { padding: 1rem; } /* Action-button rows sit in a stray .col-md-6 with its own gutter */ .card-body > .col-md-6, .card-body > .col-lg-6 { padding-left: 0; padding-right: 0; max-width: 100%; flex: 0 0 100%; } } /* -------------------------------------------------------------------------- 12. Forms - horizontal label/field pairs stack below lg -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .form-horizontal .form-group.row > .control-label, .form-horizontal .form-group.row > label { text-align: left; margin-bottom: .25rem; } .form-horizontal .form-group.row { margin-left: 0; margin-right: 0; } .form-horizontal .form-group.row > [class^="col-"], .form-horizontal .form-group.row > [class*=" col-"] { padding-left: 0; padding-right: 0; } /* Submit/reset buttons full width and reachable */ .form-horizontal .form-group.row .btn { margin-bottom: .5rem; } } @media (max-width: 575.98px) { .form-horizontal .form-group.row .btn { width: 100%; } } /* File inputs are unusable at their native size on iOS */ @media (hover: none) and (pointer: coarse) { input[type="file"].form-control { height: auto; min-height: 44px; padding: 10px; line-height: 1.4; } } /* -------------------------------------------------------------------------- 13. iPhone safe areas (notch / home indicator) - the viewport now uses viewport-fit=cover, so insets must be applied manually. -------------------------------------------------------------------------- */ @supports (padding: max(0px)) { .ms-navbar .container, .ms-header .container, .ms-footbar .container { padding-left: max(15px, env(safe-area-inset-left)); padding-right: max(15px, env(safe-area-inset-right)); } .ms-slidebar .sb-slidebar-container { padding-bottom: env(safe-area-inset-bottom); } .ms-footbar { padding-bottom: max(0px, env(safe-area-inset-bottom)); } .ms-toggle-top, .btn-top { margin-bottom: env(safe-area-inset-bottom); } } /* -------------------------------------------------------------------------- 14. Inventory table (Product/Inventory) -------------------------------------------------------------------------- */ .inventory-table caption { caption-side: top; text-align: left; padding-bottom: 6px; } @media (max-width: 767.98px) { /* Card-per-row layout: the header cell label is rendered via data-label */ .inventory-table, .inventory-table thead, .inventory-table tbody, .inventory-table tr, .inventory-table td { display: block; width: 100%; } .inventory-table thead { display: none; } .inventory-table tr { border: 1px solid #e9ecef; border-radius: 6px; margin-bottom: 12px; padding: 8px 12px; } .inventory-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border: 0; border-bottom: 1px solid #f1f3f5; padding: 8px 0; } .inventory-table td:last-child { border-bottom: 0; } .inventory-table td::before { content: attr(data-label); font-weight: 600; color: #6c757d; flex: 0 0 auto; } .inventory-table td[data-label=""]::before, .inventory-table td.inventory-title::before { content: none; } .inventory-table td.inventory-title { display: block; } }