/* ===================================================================== EasyLearn - global mobile responsive layer Place at: public/Easylearn/css/responsive.css Load AFTER easylearn.css. Every rule lives inside a max-width media query, so desktop (>= 992px) is not affected at all. ===================================================================== */ /* ---------- Tablet & below (<= 991px) ---------- */ @media (max-width: 991.98px) { /* never let the page scroll sideways */ html, body { max-width: 100%; overflow-x: hidden; } .wrapper, .content-wrapper, .container-full { max-width: 100%; } /* media never overflows its container */ img, video, canvas, svg, iframe, embed, object { max-width: 100%; } img { height: auto; } /* tables scroll inside themselves instead of breaking the page */ .content-wrapper table.table, .content-wrapper table.dataTable, .container-full table, .modal-body table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* DataTables with scrollY/scrollX already scroll inside their own box - keep real table layout */ .dataTables_scrollHead table, .dataTables_scrollBody table, .dataTables_scrollFoot table { display: table !important; overflow: visible !important; } .table-responsive { -webkit-overflow-scrolling: touch; } /* pre / code blocks */ pre, code { white-space: pre-wrap; word-break: break-word; } /* fullcalendar */ .fc .fc-toolbar { flex-direction: column; gap: 8px; } .fc .fc-toolbar-title { font-size: 1.15rem; } .fc-view-harness { overflow-x: auto; } /* select2 / choices / tagify / intl-tel-input fill their column */ .select2-container { width: 100% !important; } .intl-tel-input, .iti { width: 100%; } .tagify { max-width: 100%; } } /* ---------- Phones & small tablets (<= 767px) ---------- */ @media (max-width: 767.98px) { /* breathing room */ .content-wrapper .content, .content-wrapper section.content { padding: 10px; } .container-full { padding-left: 8px; padding-right: 8px; } .box, .card { margin-bottom: 12px; } .box-header, .box-body, .box-footer, .card-header, .card-body, .card-footer { padding: 12px; } .box-header, .card-header { flex-wrap: wrap; gap: 8px; } /* headings */ h1, .h1 { font-size: 1.6rem; } h2, .h2 { font-size: 1.4rem; } h3, .h3 { font-size: 1.2rem; } h4, .h4 { font-size: 1.1rem; } .page-title { font-size: 1.2rem; } .content-header { flex-wrap: wrap; } .breadcrumb { flex-wrap: wrap; } /* anything with a hard-coded inline pixel width is capped to its parent */ .content-wrapper [style*="width:"][style*="px"], .modal-body [style*="width:"][style*="px"] { max-width: 100% !important; } .content-wrapper [style*="min-width"][style*="px"] { min-width: 0 !important; } /* buttons / toolbars wrap instead of overflowing */ .btn-group, .btn-toolbar, .dt-buttons, .nav-tabs, .nav-pills { flex-wrap: wrap; } .nav-tabs { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; } .nav-tabs .nav-item { flex: 0 0 auto; } .dt-buttons .btn, .dt-buttons button { margin-bottom: 4px; } /* forms: stack, full width, easy to tap */ .form-inline { flex-direction: column; align-items: stretch; } .form-inline .form-control, .form-inline .btn { width: 100%; margin-bottom: 8px; } .input-group { flex-wrap: nowrap; } .form-control, .custom-select, select, textarea { max-width: 100%; } .form-control, .custom-select { font-size: 16px; } /* stops iOS zoom-on-focus */ .btn { white-space: normal; } /* DataTables controls */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { float: none !important; text-align: left !important; display: block; margin-bottom: 8px; } .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; } .dataTables_wrapper .dataTables_paginate { white-space: normal; } .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 4px 8px; } /* modals use the full screen width */ .modal-dialog, .modal-dialog.modal-lg, .modal-dialog.modal-xl, .modal-dialog.modal-sm { margin: 8px auto; max-width: calc(100% - 16px); width: auto; } .modal-body { overflow-x: auto; padding: 12px; } .modal-content { max-height: calc(100vh - 16px); } .modal-body, .modal-content { word-break: break-word; } /* dropdowns never run off the screen */ .dropdown-menu { max-width: calc(100vw - 16px); } .main-header .dropdown-menu { min-width: 0 !important; width: calc(100vw - 16px); max-width: 360px; } /* top header icons */ .main-header .navbar-nav > li > a, .main-header .navbar .nav-link { padding-left: 6px; padding-right: 6px; } .main-header .navbar-custom-menu .nav { flex-wrap: nowrap; } .main-header .logo-lg img { max-height: 36px !important; } #google_translate_element { margin-top: 10px !important; max-width: 120px; overflow: hidden; } /* floating widgets (exam clock etc.) */ #examClockWidget { right: 8px; width: 180px; max-width: calc(100vw - 16px); } /* sweetalert */ .swal2-popup { width: 92% !important; max-width: 92% !important; font-size: 0.95rem; } /* flex rows that should wrap on phones */ .d-flex.justify-content-between { flex-wrap: wrap; gap: 8px; } /* footer */ .main-footer { padding: 12px 8px; } .main-footer .nav { flex-direction: column; align-items: center; text-align: center; } .main-footer img { max-height: 28px; } } /* ---------- Small phones (<= 575px) ---------- */ @media (max-width: 575.98px) { .content-wrapper .content { padding: 8px; } .container-full { padding-left: 6px; padding-right: 6px; } h1, .h1 { font-size: 1.4rem; } .btn-lg { padding: 8px 14px; font-size: 1rem; } .btn-group > .btn { flex: 1 1 auto; } .col, [class*="col-"] { padding-left: 8px; padding-right: 8px; } .modal-dialog { margin: 4px auto; max-width: calc(100% - 8px); } } /* ===================================================================== Card-grid pages (.cfg-wrap / .cfg-grid / .cfg-card) Used by: dashboard_page, mentor_media, training_material, reference_document, manage_training_material and the other *_media / *_services / *_tools / *_reference ... card pages. !important is needed because these pages define their own inline