elements as direct children of the

, i.e. outside any .container. Bootstrap 3 gives .row a -15px horizontal margin that is normally cancelled by the container's +15px padding — with no container, that -15px escapes on both sides and forces a 30px horizontal scroll on every phone. */ form > .row, body > form > .row { margin-left: 0; margin-right: 0; } /* Long unbroken strings (URLs, e-mail addresses) must not widen the page. */ p, h1, h2, h3, h4, h5, h6, li, td, .event-desc, .about-box p, .msg-box p, .info-item { overflow-wrap: break-word; word-wrap: break-word; } /* ========================================================================== 2. TAP TARGETS — anything interactive gets a comfortable touch area ========================================================================== */ @media (max-width: 991px) { .nav-list > li > a, .sub-menu li a { min-height: 46px; display: flex; align-items: center; } .top-utility-bar .aj, .download-btn, .notice-link-btn, .home-notice-link, .read-more-btn, .submit-btn, .cat-btn, .btn-show-all-simple, .pagination-simple .VV { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } /* Carousel arrows are the primary way to move a slider by thumb. */ #myCarousel .carousel-control, .custom-carousel .carousel-control { width: 44px; height: 44px; } .dez-social-icon li a { width: 40px; height: 40px; font-size: 22px; } } /* ========================================================================== 3. FORMS — stop iOS Safari auto-zooming on focus Any input with a computed font-size below 16px makes mobile Safari zoom the whole page in when it receives focus, and it never zooms back out. ========================================================================== */ @media (max-width: 991px) { .form-control, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], select, textarea { font-size: 16px; } .form-control { height: 48px; } textarea.form-control { height: 120px; } /* Full-width submit is easier to hit than a right-floated pill. */ .contact-card .text-right { text-align: center; } .submit-btn { width: 100%; justify-content: center; } } /* ========================================================================== 4. HEADER — utility bar + logo row ========================================================================== */ @media (max-width: 991px) { .top-utility-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 7px 8px; text-align: center; } .top-utility-bar .aj { margin: 0; padding: 6px 10px; font-size: 12px; flex: 1 1 auto; max-width: 33%; white-space: nowrap; } .header-logos { justify-content: center; gap: 12px; padding: 10px 12px; } } @media (max-width: 600px) { /* Three login buttons will not fit on one line under ~600px, so give the first two a row and let the third centre itself underneath. */ .top-utility-bar .aj { max-width: none; flex: 0 1 auto; font-size: 11.5px; padding: 6px 9px; } .header-logos img { width: 118px; } .header-logos .school-icon img { width: 62px; } } @media (max-width: 400px) { .header-logos { gap: 8px; padding: 8px; } .header-logos img { width: 96px; } .header-logos .school-icon img { width: 52px; } } /* ========================================================================== 5. NAVIGATION — touch behaviour nav-fix.css already builds the hamburger + accordion. These rules cover what it left out: a scroll-safe open menu, a visible open state, and a chevron that actually rotates when a submenu is expanded. ========================================================================== */ .menu-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 6px; -webkit-tap-highlight-color: transparent; } .menu-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media (max-width: 991px) { /* nav-fix.css animates max-height, which cannot be animated to `auto`. 80vh is right for a phone but clips the 10-item menu in landscape, so allow the list its own scroll and keep momentum scrolling. */ .nav-list.show { max-height: calc(100vh - 120px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; box-shadow: 0 14px 24px rgba(0, 0, 0, .25); } /* The chevron is the only affordance telling a thumb "this expands". */ .nav-list > li > a .chev { transition: transform .2s ease; font-size: 14px; opacity: .9; } .nav-list > li.open > a .chev { transform: rotate(180deg); } /* Hover styling is meaningless on touch and leaves links stuck in the hover colour after a tap — restrict it to the real open state. */ .nav-list > li:hover > a { background: none; } .nav-list > li.open > a { background: #8a1a86; } .nav-list > li.active > a, .sub-menu li.active > a { background: rgba(255, 255, 255, .14); } .sub-menu li a { min-height: 44px; padding-top: 11px; padding-bottom: 11px; } /* A submenu with 5 items needs more than nav-fix.css's 400px ceiling once each row is 44px tall. */ .nav-list > li.open .sub-menu { max-height: 420px; overflow-y: auto; } } /* ========================================================================== 6. HOME / INDEX — main banner carousel The slides were . `height:100%` of an auto-height parent resolves to auto, so the banner was as tall as the source image: a 1920x600 banner became 600px tall on a 375px screen once scaled, or it letterboxed. A fixed aspect ratio keeps it predictable. ========================================================================== */ @media (max-width: 991px) { #myCarousel .carousel-inner > .item > img, #myCarousel .carousel-inner > .item img { width: 100%; height: auto; max-height: 46vw; object-fit: cover; object-position: center; } } @media (max-width: 600px) { #myCarousel .carousel-inner > .item > img, #myCarousel .carousel-inner > .item img { max-height: 52vw; min-height: 130px; } } /* ========================================================================== 7. HOME / INDEX — scrolling notice ticker Replaces the horizontal . A marquee cannot be paused, dragged or read by a screen reader on a phone; this can be swiped, pauses on touch, and honours prefers-reduced-motion. ========================================================================== */ .ms-ticker { position: relative; width: 100%; overflow: hidden; background: #6f066d; } .ms-ticker-track { display: inline-block; white-space: nowrap; padding-left: 100%; /* start just off the right edge */ animation: ms-ticker-scroll var(--ms-ticker-duration, 32s) linear infinite; will-change: transform; } .ms-ticker:hover .ms-ticker-track, .ms-ticker:focus-within .ms-ticker-track, .ms-ticker.is-paused .ms-ticker-track { animation-play-state: paused; } .ms-ticker-track > p, .ms-ticker-text { display: inline-block; margin: 0; padding: 10px 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; line-height: 1.5; color: #fff; white-space: nowrap; } .ms-ticker-text a { color: #ffe9ff !important; text-decoration: underline; } @keyframes ms-ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } /* Readers who disable animation get a plain, swipeable strip instead. */ @media (prefers-reduced-motion: reduce) { .ms-ticker { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ms-ticker-track { animation: none; padding-left: 12px; } } @media (max-width: 600px) { .ms-ticker-track > p, .ms-ticker-text { font-size: 12.5px; padding: 8px 0; } } /* ========================================================================== 8. HOME / INDEX — notice board panel Replaces the vertical . That marquee was 350px wide and 340px tall with overflow:hidden, so on a 375px phone it clipped its own content and could not be scrolled by finger at all. ========================================================================== */ .ms-notice-panel { width: 100%; height:380PX; max-width: 100%; background: #fff; border-radius: 0 0 10px 10px; } .ms-notice-scroll { max-height: 350px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; padding: 4px 10px 8px; scrollbar-width: thin; scrollbar-color: #b98ab8 #f1e7f1; } .ms-notice-scroll::-webkit-scrollbar { width: 6px; } .ms-notice-scroll::-webkit-scrollbar-thumb { background: #b98ab8; border-radius: 6px; } .ms-notice-scroll::-webkit-scrollbar-track { background: #f1e7f1; } /* The code-behind emits each notice inside

. Inside a plain scroll container those Bootstrap columns add 15px of padding for no reason and their parent has no .row to cancel it. */ .ms-notice-scroll > .col-sm-12, .ms-notice-track > .col-sm-12 { width: 100%; padding-left: 0; padding-right: 0; float: none; } .ms-notice-hint { display: none; } @media (max-width: 991px) { .ms-notice-scroll { max-height: 320px; } /* Tell a thumb the list is scrollable — a clipped list with no visible scrollbar on iOS otherwise looks like the content simply ends. */ .ms-notice-hint { display: block; padding: 6px 10px 8px; font-size: 11px; color: #8b6f8a; text-align: center; border-top: 1px solid #f0e6f0; } .home-notice-item { margin: 8px 0 10px; } .home-notice-text { font-size: 13px; padding: 9px 11px; } .home-notice-date { min-width: 56px; } } /* ========================================================================== 9. HOME / INDEX — News & Events + Notice row Both columns are on the md tier, so they stack below 992px. The card heights the desktop layout relies on have to relax at the same breakpoint, not at 767px, or the stacked cards keep a 330px shell around 100%-wide content. ========================================================================== */ @media (max-width: 991px) { .events { margin: 10px 0 0; padding: 0; } .events > .col-md-5, .events > .col-md-7 { width: 100%; float: none; padding: 10px 8px !important; } /* FIX: .outbox had a hard 330px height and .ll img a hard 260px. Once the column is full width the image grows but the shell does not, so the caption was pushed outside the card. */ .outbox { height: auto; min-height: 0; margin: 6px 0 10px; } .ll img { height: auto; aspect-ratio: 16 / 10; object-fit: cover; } .text2 { padding: 10px 12px 12px; } } @media (max-width: 767px) { .news-desc { font-size: 13px; } } /* aspect-ratio is unsupported on older Android WebViews — give them a height in the same proportion rather than an auto-height collapse. */ @supports not (aspect-ratio: 1 / 1) { @media (max-width: 991px) { .ll img { height: 240px; } } @media (max-width: 600px) { .ll img { height: 190px; } } } /* ========================================================================== 10. HOME / INDEX — Director & Principal message blocks ========================================================================== */ @media (max-width: 767px) { .prin_box { margin-top: 18px; padding: 16px 10px; MARGIN-LEFT: 10PX; MARGIN-RIGHT: 10PX; } .photo-gal { padding: 6px 0; } .principal_pic { text-align: center; } /* Was a hard 210x170 with object-fit:fill, which squashed the portrait. */ .principal_pic img { width: 160px; height: 160px; object-fit: fill; margin: 0 auto 14px; } .principal_message { margin-left: 0; } .principal_message p { text-align:justify; font-size: 13.5px; line-height: 1.7; } .photo-heading h3 { line-height: 1.4; padding: 8px 6px !important; font-size: 16px; } /* The heading is wrapped in col-sm-8 > col-sm-9, which on xs collapses to full width but keeps 30px of stacked padding. */ .head-cont1 .col-sm-8, .head-cont1 .col-sm-9, .head-cont1 .col-sm-12 { padding-left: 0; padding-right: 0; } } /* ========================================================================== 11. HOME / INDEX — Photo Gallery & Achievements carousels Home.aspx puts the image in col-xs-6 and the caption in col-xs-6, so on a 375px screen each half is ~170px: an unreadable two-column card. Stack them. ========================================================================== */ @media (max-width: 767px) { .custom-section { margin: 20px 0; padding: 14px 10px; } .section-heading { font-size: 14px; padding: 9px 10px; } .custom-carousel .row { display: block; } .custom-carousel .col-xs-6, .custom-carousel .col-sm-4, .custom-carousel .col-sm-8 { width: 100%; float: none; height: auto; } .custom-carousel .item img, .custom-carousel .item .img-responsive, .custom-carousel img.img-responsive { width: 100% !important; height: auto !important; aspect-ratio: 16 / 10; object-fit: cover !important; } .custom-carousel .item { min-height: 0; padding-bottom: 8px; } /* The caption column had a fixed 140px height with its own scrollbar — a scroll-within-a-scroll is hostile on touch. Let it flow. */ .custom-carousel .col-sm-8, .custom-carousel .col-xs-6:nth-child(2) { height: auto; overflow-y: visible; } .custom-carousel h5, .custom-carousel p { padding-left: 12px !important; padding-right: 12px !important; } /* Home.aspx hard-codes padding-left:40px on these captions inline. */ .custom-carousel h5[style], .custom-carousel p[style] { padding-left: 12px !important; } .custom-carousel .carousel-control { top: 30%; } } @supports not (aspect-ratio: 1 / 1) { @media (max-width: 767px) { .custom-carousel .item img, .custom-carousel .item .img-responsive { height: 190px !important; } } } /* ========================================================================== 12. BOOK LIST — the download table ========================================================================== */ @media (max-width: 767px) { .table-responsive { -webkit-overflow-scrolling: touch; border: 0; } /* ItemStyle Width="170px" + Width="70px" are rendered as inline widths on every cell, which stops the table shrinking to the viewport. */ .table td[style*="width"], .table th[style*="width"] { width: auto !important; } .book-header { padding: 14px 12px; } } @media (max-width: 420px) { .table thead th, .table tbody td { padding: 8px 4px !important; font-size: 12.5px; } .download-btn { padding: 6px 10px; font-size: 11.5px; } } /* ========================================================================== 13. PHOTO GALLERY page ========================================================================== */ @media (max-width: 991px) { /* The category rail scrolls horizontally; make that obvious and smooth. */ .category-list { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; gap: 8px; } .cat-btn { min-height: 40px; } /* Lightbox2 sizes its overlay from the window, but its default caption and close button sit outside the thumb zone on a small screen. */ .lb-outerContainer { max-width: 94vw; } .lb-image { max-width: 100% !important; height: auto !important; } .lb-close, .lb-nav a { min-width: 44px; min-height: 44px; } } /* ========================================================================== 14. NEWS & EVENTS / VACANCY / MESSAGES — small-screen padding ========================================================================== */ @media (max-width: 600px) { .news-section, .notice-section, .video-section, .about-section, .msg-section, .book-section, .gallery-page { padding-left: 10px; padding-right: 10px; } .msg-box { padding: 22px 16px; } .msg-box p, .about-box p, .event-desc { /* Justified text on a ~340px column produces rivers of white space. */ text-align: left; font-size: 14px; line-height: 1.75; } .director-img, .principal-img { width: 140px; height: 140px; } .event-title { font-size: 17px; } } /* ========================================================================== 15. FOOTER ========================================================================== */ @media (max-width: 991px) { .site-footer .footer-top { padding-top: 24px; padding-bottom: 8px; } .site-footer .footer-col-4 { text-align: center; margin-bottom: 26px; } .site-footer .dez-social-icon { justify-content: center; } .site-footer .widget_getintuch ul { list-style: none; padding: 0; } .site-footer .widget_getintuch li { margin-bottom: 12px; line-height: 1.6; } .site-footer .widget_getintuch li strong { display: block; text-transform: uppercase; font-size: 11px; letter-spacing: .4px; opacity: .8; } /* FIX: the footer bottom uses .col-md-6 with .text-left / .text-right. Under 992px both become full-width but keep their alignment, so the copyright hugs one edge and the credit the other. custom.css tried to fix this but targeted .col-md-4, which is not in the markup. */ .footer-bottom .text-left, .footer-bottom .text-right { text-align: center !important; } .footer-bottom .col-md-6 + .col-md-6 { margin-top: 6px; } } /* Tappable phone / e-mail links in the footer contact list. */ .site-footer a[href^="tel:"], .site-footer a[href^="mailto:"] { color: #fff; text-decoration: none; border-bottom: 1px dotted rgba(255, 255, 255, .45); } .site-footer a[href^="tel:"]:hover, .site-footer a[href^="mailto:"]:hover { color: #ffd9ff; } /* ========================================================================== 16. SCROLL-TO-TOP BUTTON style.css sets `display:none` on it and custom.js only ever animates `opacity`, so the button never appeared on any device. mobile.js drives the .is-visible class instead. ========================================================================== */ button.scroltop { display: flex; align-items: center; justify-content: center; height: 46px; width: 46px; right: 14px; bottom: 14px; z-index: 900; border-radius: 50%; background: #6f066d; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease; } button.scroltop.is-visible { opacity: .92; pointer-events: auto; transform: translateY(0); } button.scroltop:active { opacity: 1; transform: scale(.94); } @media (max-width: 400px) { button.scroltop { height: 42px; width: 42px; right: 10px; bottom: 10px; font-size: 20px; } } /* ========================================================================== 17. LANDSCAPE PHONES — short viewports ========================================================================== */ @media (max-width: 991px) and (max-height: 480px) and (orientation: landscape) { .nav-list.show { max-height: calc(100vh - 60px); } .breadcrumb-banner { min-height: 120px; } .ms-notice-scroll { max-height: 200px; } } /* ========================================================================== 18. PRINT ========================================================================== */ @media print { .top-utility-bar, .navbar, .menu-toggle, button.scroltop, .ms-ticker, #myCarousel .carousel-control, .site-footer .dez-social-icon { display: none !important; } .ms-notice-scroll { max-height: none; overflow: visible; } }