/* ============================================================================ MDL PORTAL — mobile-hardening.css (Porto-theme pages) Additive, non-destructive. Must be linked LAST in the (after theme.css + czm + readabler) so it wins the cascade. All rules are scoped to <=991px / <=575px — desktop is untouched. Deploy: FileZilla /public/main_porto/css/mobile-hardening.css --------------------------------------------------------------------------- Findings addressed (see mobile audit 2026-07-03): logo overflow, overflow-x safety net, responsive embeds, menu tap targets + submenu reveal, iOS input zoom, floating-widget de-conflict, text floor, tap targets, footer spacing. ============================================================================ */ /* [1] Image + iframe guard — scoped to mobile so desktop is untouched */ @media (max-width: 991px){ img { max-width: 100%; height: auto; } iframe { max-width: 100%; } #header .header-logo img { max-width: 100%; height: auto; } } /* [2] Horizontal-overflow safety net (belt-and-suspenders). clip on inner wrappers (not hidden) so position:sticky header keeps working */ @media (max-width: 991px){ html, body { overflow-x: hidden; max-width: 100%; } #wrapper, .body, .main, #footer { overflow-x: clip; max-width: 100%; } } /* [3] Responsive embeds — YouTube hero, Google Maps, Google Forms */ @media (max-width: 991px){ iframe[src*="youtube"], iframe[src*="google.com/maps"], iframe[src*="docs.google.com"] { max-width: 100%; } } /* [4] Mega-menu on mobile: 44px tap rows, taller panel, submenu affordance. Pairs with the delegated JS shim that toggles li.dropdown-submenu.open */ @media (max-width: 991px){ #header .header-nav-main nav > ul li a { padding-top: 11px; padding-bottom: 11px; line-height: 22px; } #header .header-nav-main nav { max-height: 78vh; } #header .header-nav-main nav li.dropdown-submenu > a { position: relative; } #header .header-nav-main nav li.dropdown-submenu > a::after{ content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: .6rem; opacity: .55; } #header .header-nav-main nav li.dropdown-submenu.open > .dropdown-menu { display: block; margin-left: 14px; } } /* [5] Form fields >=16px so iOS Safari doesn't auto-zoom on focus */ @media (max-width: 991px){ input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search], input[type=password], input[type=date], select, textarea, .form-control, .form-select { font-size: 16px; } } /* [6] Floating widgets — de-conflict the corners on phones. Left rail (bottom→up): CZM chat, then Readabler. Right rail: survey. */ @media (max-width: 575px){ .mdp-readabler-trigger-button-box.left-center{ top: auto !important; bottom: 150px !important; left: 12px !important; right: auto !important; transform: none !important; } .czm-fixed .czm-button, .czm-left .czm-button { left: 12px; bottom: 12px; } .czm-fixed .czm-speech-bubble, .czm-left .czm-speech-bubble { left: 12px; max-width: 78vw; } /* collapse the wide "Perlukan bantuan?" pill to a round FAB */ .czm-chat-support-3 .czm-button { width: 52px; height: 52px; padding: 0; border-radius: 50%; } .czm-chat-support-3 .czm-button-content { display: none; } .survey-widget-root { right: 12px; bottom: 12px; } } /* [7] Typography floor — keep secondary text legible on phones */ @media (max-width: 575px){ body { font-size: 14px; } #header .header-nav-top .dropdown .dropdown-item { font-size: .9em; } .footer-cms-rich, .footer-cms-tree-link, .custom-list-style-1 li { font-size: 14px; line-height: 1.6; } } /* [8] Tap targets — social icons + footer link rows to ~44px */ @media (max-width: 991px){ .social-icons.social-icons-medium li a, #header .header-social-icons .social-icons li a { width: 44px; height: 44px; line-height: 44px; } .social-icons li { margin: 0 6px 6px 0; } .footer-cms-tree-link { display: block; padding: 9px 0; line-height: 1.4; } .footer-cms-tree-item { margin-bottom: 2px; } } /* [9] Footer whitespace — tighten the compounded py/my padding when stacked */ @media (max-width: 575px){ #footer .container.py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } #footer .row.py-4.my-5 { margin-top: 1rem !important; margin-bottom: 1rem !important; padding-top: 1rem !important; padding-bottom: 1rem !important; } #footer .col-md-6.mb-5 { margin-bottom: 1.5rem !important; } } /* [10] Announcement notice bar — the JS-injected closure notice wraps to a full-screen dark block on phones. Clamp it to a slim ~3-line strip; the full text stays in the #annModal popup and at /informasi/pengumuman. */ @media (max-width: 991px){ #announcementContainer .row.py-2 { padding-top: .4rem !important; padding-bottom: .4rem !important; } #announcementText { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; } } /* [11] Mobile header logo — swap the wide horizontal lockup (mdl_logo5.png) for the square MDL crest so the brand reads clearly on phones. Desktop keeps the full lockup; content:url() swaps the rendered image without touching markup. */ @media (max-width: 991px){ #header .header-logo img { content: url(/mdlg/logo_for_page_no_bg.png); width: auto !important; height: 48px !important; max-width: 100%; } }