/* ============================================================ NO-BREAK SAFETY NET — har page par same ------------------------------------------------------------ Maqsad: slow / low-data / purane phone par bhi page NORMAL dikhe. Ye file design nahi badalti, sirf un 4 cheezon ko rokti hai jinse layout sach me tootta hai: 1. Icon font late aaye -> ligature ka LITERAL naam dikhna ("expand_more", "arrow_forward", "check_circle" …) 2. Koi ek element chauda -> poora page right me scroll 3. Badi image/video -> container se bahar 4. Lamba word / URL -> box tod dena font-head.php ke saath aati hai. Naya page banao to bas: ============================================================ */ /* ------------------------------------------------------------ 1) ICON FONT GUARD — sabse important ------------------------------------------------------------ Material icons ligature font hain: HTML me likha hota hai "expand_more" aur font usse teer/arrow bana deta hai. Font na aaye to browser wahi shabd 24px me chaap deta hai — isi se button phat-te hain aur "CSS tooti hui" lagti hai. font-head.php ka chhota script par .icons-pending lagata hai aur font ready hote hi hata deta hai. Tab tak icon ka text font-size:0 par rehta hai — yaani na dikhta hai, na koi jagah leta hai. font-size:0 hi kyun (width:1em kyun NAHI): kaafi jagah ye wahi apne size ke saath re-use hota hai — jaise business-details ke multi-select ka 18px ka custom checkbox (.check-icon). Us par agar guard `width:1em` thop de to font-size:0 hone ki wajah se 1em = 0px ho jaata aur checkbox hi gayab ho jaata. font-size:0 sirf ANDAR ke text ko khatam karta hai, element ka apna width/height/border chhedta nahi. Worst case (font sach me kabhi na pahunche): icon ki jagah khaali rehti hai — layout phir bhi bilkul theek. "expand_more" jaisa text KABHI nahi phailta. ------------------------------------------------------------ */ html.icons-pending .material-icons-outlined, html.icons-pending .material-icons, html.icons-pending .material-symbols-outlined { font-size: 0 !important; line-height: 0 !important; color: transparent !important; overflow: hidden; } /* ------------------------------------------------------------ 2) HORIZONTAL SCROLL / SAFED PATTI — kabhi nahi ------------------------------------------------------------ overflow-x:clip use kiya hai, hidden NAHI. hidden lagane se body scroll-container ban jaata hai aur upar ka position:sticky header chipakna band kar deta hai. clip me ye problem nahi hoti. Purane browser me @supports fail hoga to kuch apply nahi hoga — theek hai, kyunki overflow ki asli wajah bhi alag se fix ki gayi hai. ------------------------------------------------------------ */ html, body { max-width: 100%; } @supports (overflow: clip) { body { overflow-x: clip; } } /* Phone ke landscape/rotate par text apne aap bada na ho */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ------------------------------------------------------------ 3) MEDIA container ke andar hi rahe ------------------------------------------------------------ */ img, svg, video, canvas, iframe { max-width: 100%; } img, video { height: auto; } /* ------------------------------------------------------------ 4) Lamba word / URL / email box na tode ------------------------------------------------------------ Jaise "info@somethingverylongdomainname.com" 320px screen par card se bahar nikal jaata tha. ------------------------------------------------------------ */ p, li, a, span, td, th, label, button, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* Table/pre apne andar scroll karein, page ko na khiche */ table { max-width: 100%; } pre { overflow-x: auto; }