/* bellaward/form-mobile.css ============================================================ Mobile-only overlay for the public registration form + edit nomination form. Pure CSS, no JS, no structural change. Drop the in either form's to revert. Loaded on: - bellaward/registration_form.php - bellaward/edit_nomination_form.php Scoped under media queries so desktop layout is untouched. ============================================================ */ /* ============== Mobile (≤768px) ============== */ @media (max-width: 768px) { /* Force any fixed-width inputs (e.g. width:350px hardcoded) to fluid. */ #register_form input[type=text], #register_form input[type=email], #register_form input[type=number], #register_form input[type=tel], #register_form input[type=url], #register_form input[type=date], #register_form input[type=password], #register_form input[type=file], #register_form select, #register_form textarea, #addScheduleInterviewForm input[type=text], #addScheduleInterviewForm select, form[name=addScheduleInterviewForm] input, form[name=addScheduleInterviewForm] select, form input.form-control, form select.form-control, form textarea.form-control, form input.form-control-sm, form select.form-control-sm, form textarea.form-control-sm { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; font-size: 14px !important; } /* Increase tap target heights so iOS Safari doesn't auto-zoom on focus (font-size:14px+ avoids the auto-zoom; min-height keeps thumb-size). */ form input[type=text], form input[type=email], form input[type=number], form input[type=tel], form input[type=url], form input[type=date], form input[type=password], form select.form-control, form select.form-control-sm { min-height: 42px !important; } /* Textareas — comfortable on mobile */ form textarea { min-height: 90px !important; } /* CKEditor / WYSIWYG containers (used for problem/project briefs) */ .cke, .cke_chrome, .cke_editor, .ckeditor, .cke_inner, .cke_contents { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } .cke_contents { min-height: 160px !important; } /* Bootstrap rows — make sure col-lg-6 / col-md-6 stacks fully on phone. Bootstrap 4 already does this at ≤576px, but col-md-6 can spread at 768-991px. Force single-column up to 768px for forms specifically. */ #register_form .row > [class^="col-"], #register_form .row > [class*=" col-"], form#addScheduleInterviewForm .row > [class^="col-"], form#addScheduleInterviewForm .row > [class*=" col-"] { flex: 0 0 100% !important; max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; margin-bottom: 4px; } /* Card padding tightens on phone */ .card .card-body { padding: 16px 12px !important; } .card .card-header { padding: 12px 14px !important; } .card .card-title { font-size: 16px !important; } /* Sticky tab nav (edit form) — pills wrap, scroll if needed */ .right-panel .displayed, .col-lg-12.displayed { flex-wrap: wrap !important; gap: 6px !important; padding: 10px 8px !important; justify-content: flex-start !important; overflow-x: auto; -webkit-overflow-scrolling: touch; } .right-panel .tab-button, .tab-button { flex: 0 0 auto !important; padding: 8px 14px !important; font-size: 12px !important; min-height: 38px; white-space: nowrap; } /* Eval criteria callout — already responsive grid, just shrinks. */ /* (No fix needed — auto-fit minmax(150px, 1fr) handles it.) */ /* Public/Private visibility radio cards stack 1-col */ .visibility-cards { flex-direction: column !important; } .visibility-cards label { flex: 0 0 100% !important; min-width: 0 !important; width: 100%; padding: 12px !important; } .visibility-cards .vc-title { font-size: 13px !important; } .visibility-cards .vc-desc { font-size: 11.5px !important; } /* Add Team Member / Add Jury Presenter buttons stack + full width */ #addMemberBtn, #addJuryPresenterBtn { width: 100% !important; margin: 0 0 8px !important; padding: 11px 14px !important; font-size: 13px !important; min-height: 44px; } /* Member cards on the form — smaller padding */ #memberList .card, #sortable .card, .ui-state-default { padding: 14px 12px !important; } #memberList .card-header { flex-wrap: wrap !important; gap: 6px; font-size: 14px !important; } #memberList .card-header .close { margin-left: auto; } /* "This person will present at jury round" toggle row */ .col-lg-12.col-md-12.col-sm-12.otpdone1 .form-group[style*="border-left"] { flex-direction: column !important; align-items: flex-start !important; padding: 10px !important; } /* Submit / Update / Save Schedule buttons full width */ button[type=submit], #btnAddSchedule, #updateNomination, .btn-success, .btn-primary.btn-lg, button.btn[id*="ave"], button.btn[id*="ubmit"] { width: 100% !important; min-height: 46px !important; margin-top: 10px !important; } /* Hero / form heading */ .card-title-powered, h2.card-title, h1.card-title { font-size: 18px !important; line-height: 1.3; } /* Required-field asterisks stay readable */ span.required { font-size: 13px; } /* Choose-file inputs — readable + tappable */ input[type=file] { padding: 9px !important; font-size: 12px !important; } input[type=file]::-webkit-file-upload-button { padding: 8px 14px; border: 0; background: #0a294f; color: #fff; border-radius: 5px; font-weight: 600; } /* Country dropdown / Select2 widgets */ .select2-container, .select2-container--default, .select2-container--bootstrap4 { width: 100% !important; } .select2-selection--single { height: 42px !important; } .select2-selection__rendered { line-height: 30px !important; } /* T&Cs / declaration checkbox row */ .declaration-row, .agree-row { padding: 12px !important; font-size: 13px !important; } /* Reduce horizontal page padding so form takes full width */ body, .right-panel, .content { padding-left: 0 !important; padding-right: 0 !important; } .content.mt-3 { padding: 0 8px !important; } } /* ============== Phone (≤480px) ============== */ @media (max-width: 480px) { .card .card-body { padding: 14px 10px !important; } .card .card-title { font-size: 15px !important; } .right-panel .tab-button, .tab-button { padding: 7px 12px !important; font-size: 11.5px !important; } /* Form labels — slightly smaller on tiny screens */ form label, form .form-control-label { font-size: 12.5px !important; } /* Eval criteria callout title */ .col-lg-12 div[style*="linear-gradient(135deg,#0a294f"] > div:first-child > div:first-child { font-size: 14px !important; } }