/* * ============================================================ * VIGIL THEME — MOBILE OPTIMIZATION CSS * File: vigil/css/vigil-mobile-optimized.css * Enqueue after all theme stylesheets in functions.php * Covers: 320px – 768px (all mobile screens) * ============================================================ * * HOW TO ENQUEUE IN functions.php: * ───────────────────────────────── * wp_enqueue_style( * 'vigil-mobile-optimized', * get_template_directory_uri() . '/css/vigil-mobile-optimized.css', * array( 'vigil-style' ), // load after main stylesheet * '1.0.0' * ); * * ============================================================ * BUG FIXES & CHANGES SUMMARY * ============================================================ * * 1. FIXED — Container fixed-pixel widths (grid.css 290px/420px) * Replaced hard-coded px widths with 100% + box-sizing. * This was the #1 cause of horizontal scrolling on narrow phones. * * 2. FIXED — Body font-size 14px (base.css line 47) * Raised to 16px on mobile for WCAG / readability. * * 3. FIXED — Nested media query inside @media (layout.css line 1242) * CSS Level 3 nested media queries are unreliable. The iphone * sidebar fix used a nested @media which some parsers ignore or * misinterpret. Flattened into a standard rule here. * * 4. FIXED — overflow-x:hidden missing on element on mobile * base.css sets it on body but not html; both are needed to * prevent the html root from scrolling on iOS Safari/WebKit. * * 5. FIXED — Images without max-width:100% inside columns/sections * Several shortcode image wrappers did not constrain images. * * 6. FIXED — Buttons below touch-target minimum (44px height) * dt-sc-button and form submit buttons had no min-height. * * 7. FIXED — Input fields narrower than viewport on small screens * box-sizing was not set, causing padding to overflow container. * * 8. FIXED — .event-contact-info.wpb_column fixed at 320px width * (custom-class.css line 350) — overridden to 100% + auto float. * * 9. FIXED — .container fixed at 290px (320px screen) or 420px (480px) * These values leave significant whitespace on modern phones. * Replaced with fluid widths using calc() and safe padding. * * 10. ADDED — Flexbox column stacking fallback for old floated layouts * Wrapping rows with flexbox ensures columns stack reliably. * * ============================================================ */ /* ============================================================ SECTION 0 — GLOBAL BOX-MODEL & OVERFLOW FOUNDATION Must come first; everything else depends on this. ============================================================ */ @media only screen and (max-width: 768px) { /* * FIX #4 — Apply overflow-x:hidden to BOTH html AND body. * base.css only sets it on body, but on iOS Safari the * element can still scroll horizontally, revealing blank whitespace. */ html { overflow-x: hidden; /* Prevent text inflation on orientation change */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* * FIX #1 (global) — Force every element to include padding/border * in its declared width, preventing elements from spilling outside * their parent. This is the single most effective overflow fix. */ *, *::before, *::after { box-sizing: border-box; } } /* ============================================================ SECTION 1 — CONTAINER & LAYOUT WIDTHS Overrides the hard-coded pixel widths in grid.css that cause horizontal scrolling and excessive whitespace. ============================================================ */ @media only screen and (max-width: 768px) { /* * FIX #1 & #9 — Replace all fixed-px container widths with fluid. * grid.css sets .container to 290px (≤479px) and 420px (480-767px). * On a 375px iPhone this leaves ~85px of wasted or clipped space. * * Use calc(100% - 30px) = full width minus 15px gutters each side. * The 15px gutter prevents content from pressing against screen edges. */ .container, .type5.tribe_events .container .container, .layout-boxed .vc_row .dt-sc-stretch-row-content, .left-header #header-wrapper .top-bar .container { width: calc(100% - 30px) !important; max-width: 100%; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; } /* Full-bleed / fill containers stay 100% wide */ .container.fill-container, .page-template-tpl-fullwidth .section-wrapper.fullwidth-section .container.fill-stretch-row { width: 100% !important; max-width: 100%; padding-left: 0; padding-right: 0; } /* Boxed layout wrappers */ .layout-boxed .wrapper, .layout-boxed .main-header-wrapper, .layout-boxed .is-sticky #header-wrapper, .layout-boxed.standard-header .main-header-wrapper { width: 100% !important; max-width: 100%; } /* Main content area always full width */ #primary, #primary.with-left-sidebar, #primary.with-right-sidebar, #primary.with-both-sidebar { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; } /* Sidebars stack below content */ #secondary, #secondary-right, #secondary-left { width: 100% !important; float: none !important; margin: 0 !important; clear: both; } /* Wrapper and inner-wrapper — always full bleed on mobile */ .wrapper, .inner-wrapper { width: 100% !important; padding-left: 0; padding-right: 0; } /* VC Row — no hidden overflow that clips content */ .vc_row, .vc_row-fluid, .vc_row.vc_row-no-padding { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; left: auto !important; } /* Stretch rows */ .vc_row .dt-sc-stretch-row-content { width: 100% !important; margin: 0 !important; padding: 0 !important; } } /* ============================================================ SECTION 2 — COLUMN STACKING Ensures all multi-column layouts stack vertically on mobile. ============================================================ */ @media only screen and (max-width: 768px) { /* * Stack all custom column fractions to 100% width. * grid.css already does this for max-width:767px but misses * certain combinations and doesn't account for box-sizing. */ .column, .dt-sc-one-half, .dt-sc-one-third, .dt-sc-two-third, .dt-sc-one-fourth, .dt-sc-three-fourth, .dt-sc-one-fifth, .dt-sc-two-fifth, .dt-sc-three-fifth, .dt-sc-four-fifth, .dt-sc-one-sixth, .dt-sc-two-sixth, .dt-sc-three-sixth, .dt-sc-four-sixth, .dt-sc-five-sixth, .dt-sc-full-width, .dt-sc-one-column { width: 100% !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; clear: both; } /* Visual Commerce / WPBakery columns */ .wpb_column, .wpb_column.dt-sc-one-fifth, .wpb_column.dt-sc-two-fifth, .wpb_column.dt-sc-three-fifth, .wpb_column.dt-sc-one-fourth, .wpb_column.dt-sc-three-fourth, [class*="vc_col-sm-"], [class*="vc_col-xs-"] { width: 100% !important; float: none !important; margin-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Space between stacked columns */ .wpb_column { margin-bottom: 20px; } .wpb_column:last-child { margin-bottom: 0; } /* FIX #8 — event-contact-info had a hard-coded 320px width */ .event-contact-info.wpb_column { width: 100% !important; float: none !important; padding: 40px 20px 30px !important; } /* vc_column-inner padding reset */ .vc_column-inner, .wpb_column .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; } } /* ============================================================ SECTION 3 — TYPOGRAPHY FIX #2 — Body font-size bumped from 14px to 16px. Line-height improved for mobile readability. ============================================================ */ @media only screen and (max-width: 768px) { body { font-size: 16px !important; /* was 14px in base.css */ line-height: 1.6 !important; } /* Paragraph spacing */ p { font-size: 16px; line-height: 1.6; margin-bottom: 15px; } /* Scale down large headings that break layout on narrow screens */ h1 { font-size: 28px !important; line-height: 1.2 !important; } h2 { font-size: 24px !important; line-height: 1.25 !important; } h3 { font-size: 20px !important; line-height: 1.3 !important; } h4 { font-size: 18px !important; line-height: 1.35 !important; } h5 { font-size: 16px !important; line-height: 1.4 !important; } h6 { font-size: 14px !important; line-height: 1.4 !important; } /* Breadcrumb title — overrides the 26px in layout.css */ .main-title-section h1 { font-size: 22px !important; word-break: break-word; overflow-wrap: break-word; } /* Long words / URLs that break layout */ p, li, td, th, .entry-content, .entry-summary, .widget_text { word-break: break-word; overflow-wrap: break-word; } } /* ============================================================ SECTION 4 — IMAGES & MEDIA FIX #5 — Ensure all images, video and embeds are responsive. ============================================================ */ @media only screen and (max-width: 768px) { img, video, embed, object, iframe, canvas, svg { max-width: 100% !important; height: auto !important; } /* Vigil-specific image wrappers */ .dt-sc-image-wrapper img, .dt-sc-team img, .dt-sc-fancy-box img, .dt-sc-portfolio-container img, .dt-sc-blog img, .entry-thumbnail img, .post-thumbnail img, .wp-post-image, .attachment-full, .attachment-large, .vc_single_image-wrapper img, .portfolio-image img, .slider-image img, #slider img { max-width: 100% !important; width: 100%; height: auto !important; } /* Embedded video containers — aspect-ratio preserve */ .video-container, .embed-container, .wp-video, .responsive-video { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; } .video-container iframe, .embed-container iframe, .video-container video, .embed-container video { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } } /* ============================================================ SECTION 5 — BUTTONS & TOUCH TARGETS FIX #6 — Minimum 44px height for all tappable elements. ============================================================ */ @media only screen and (max-width: 768px) { /* * All Vigil buttons — ensure minimum 44×44px touch target. * Apple HIG and Google Material both specify 44px minimum. */ .dt-sc-button, a.dt-sc-button, button, input[type="submit"], input[type="reset"], input[type="button"], .btn, .woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button { min-height: 44px !important; min-width: 44px !important; padding: 12px 20px !important; font-size: 15px !important; line-height: 1.4 !important; display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Small size variant — still needs 44px */ .dt-sc-button.small, a.dt-sc-button.small { min-height: 44px !important; padding: 10px 18px !important; font-size: 14px !important; } /* Large/full-width CTA buttons */ .dt-sc-button.full-width, .dt-sc-newsletter-section .dt-sc-button { width: 100%; text-align: center; display: flex !important; } /* Menu toggle button */ .dt-menu-toggle, #dt-menu-toggle { min-height: 44px; min-width: 44px; padding: 10px; display: flex !important; align-items: center; justify-content: center; } /* Navigation links */ #main-menu > ul.menu > li > a, #main-menu > ul.menu > li > span.nolink-menu { min-height: 44px !important; line-height: 44px !important; padding: 0 15px !important; } } /* ============================================================ SECTION 6 — FORMS & INPUT FIELDS FIX #7 — Prevent inputs from overflowing their containers. ============================================================ */ @media only screen and (max-width: 768px) { input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], textarea, select, .search-field { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; min-height: 44px !important; padding: 10px 12px !important; font-size: 16px !important; /* prevents iOS auto-zoom on focus */ } textarea { min-height: 100px !important; } /* Search form */ .main-header #searchform, #searchform, .search-form { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } /* Contact form rows */ .wpcf7-form .wpcf7-form-control-wrap, .dt-sc-contact-form .dt-sc-field { width: 100% !important; float: none !important; margin-right: 0 !important; clear: both; margin-bottom: 15px; } /* Gravity forms full-width on mobile */ .gform_wrapper .ginput_container, .gform_wrapper li.gfield { width: 100% !important; } } /* ============================================================ SECTION 7 — HEADER & NAVIGATION ============================================================ */ @media only screen and (max-width: 768px) { /* Full-bleed header */ #header, #header-wrapper, .main-header, .main-header-wrapper { width: 100% !important; max-width: 100%; box-sizing: border-box; } /* Logo alignment */ #logo { text-align: center; width: 100%; display: block; padding: 15px 0 10px; box-sizing: border-box; } #logo a { display: inline-block; float: none; max-width: 100%; } #logo a img { max-width: 100%; height: auto; margin: 0 auto; display: block; } /* Top bar — centered, no overflow */ .top-bar { max-height: none !important; text-align: center; padding: 8px 15px; box-sizing: border-box; overflow: hidden; } /* Mobile menu — full width, no horizontal bleed */ #main-menu { width: 100% !important; box-sizing: border-box; overflow: hidden; } #main-menu ul.menu { width: 100%; } #main-menu ul.menu li { width: 100%; float: none; } /* Menu icons wrapper — prevent absolute positioning from clipping */ .menu-icons-wrapper { position: static; text-align: right; width: 100%; margin: 0; box-sizing: border-box; } } /* ============================================================ SECTION 8 — FOOTER ============================================================ */ @media only screen and (max-width: 768px) { #footer, .footer-widget-area, #footer-wrapper { width: 100% !important; box-sizing: border-box; overflow: hidden; } /* Footer columns stack vertically */ .footer-widget-area .wpb_column, .footer-widget-area .column, #footer .dt-sc-one-fourth, #footer .dt-sc-one-third, #footer .dt-sc-one-half, .footer-copyright .vc_col-sm-6 { width: 100% !important; float: none !important; margin-bottom: 25px !important; text-align: center !important; padding: 0 !important; box-sizing: border-box; } /* Copyright bar */ .footer-copyright { text-align: center; } .footer-copyright .menu-links li { margin: 0 10px; } .footer-copyright .alignright { float: none; display: block; text-align: center; } .footer-copyright .sociable ul.dt-sc-sociable { float: none; display: block; text-align: center; } } /* ============================================================ SECTION 9 — SECTIONS, ROWS & SHORTCODES Prevent full-width sections from adding side whitespace. ============================================================ */ @media only screen and (max-width: 768px) { /* Full-bleed section wrappers */ .section-wrapper, .fullwidth-section, .fullwidth-section .inner-wrapper, .vc_row.fullwidth, .dt-sc-section-wrapper { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; overflow: hidden; } /* Individual section padding — keep vertical rhythm */ .section-wrapper, .dt-sc-section-wrapper { padding-top: 40px; padding-bottom: 40px; } /* Fancy box / icon box */ .dt-sc-fancy-box, .dt-sc-icon-box { text-align: center; padding: 20px 15px; } /* Team boxes */ .dt-sc-team { max-width: 320px; margin: 0 auto 30px; } .dt-sc-team .dt-sc-team-details { width: 90%; margin: -60px auto 0 !important; float: none !important; } /* Pricing table — stack on mobile */ .dt-sc-pr-tb-col { width: 100% !important; margin-bottom: 20px; } /* Testimonials */ .dt-sc-testimonial { padding: 20px 15px; } /* Progress bars */ .dt-sc-progress { margin-bottom: 20px; } /* Tabs — horizontal tabs become scrollable */ ul.dt-sc-tabs-horizontal, ul.dt-sc-tabs-vertical { display: flex; flex-wrap: wrap; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-bottom: none; } ul.dt-sc-tabs-horizontal > li, ul.dt-sc-tabs-vertical > li { flex: 1 1 auto; min-width: 0; } /* Side navigation */ .side-navigation, .side-navigation-content { width: 100% !important; float: none !important; } .side-navigation { margin-bottom: 30px; } /* Newsletter sections */ .dt-sc-newsletter-section input[type="email"], .dt-sc-newsletter-section input[type="text"] { width: 100% !important; margin-bottom: 10px; border-radius: 3px; } /* Maps */ .responsive-map, .dt-sc-map { max-width: 100% !important; width: 100% !important; overflow: hidden; } /* WPBakery single image */ .vc_single_image-wrapper { display: block; width: 100%; } /* Tables — horizontal scroll instead of overflow */ .entry-content table, .dt-sc-table-container table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ============================================================ SECTION 10 — WOOCOMMERCE (MOBILE) ============================================================ */ @media only screen and (max-width: 768px) { /* Product grid — 1 column on phones */ .woocommerce ul.products, .woocommerce-page ul.products { display: flex; flex-wrap: wrap; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: 100% !important; margin: 0 0 20px !important; float: none !important; } /* 2 columns on landscape phones (≥480px) */ @media only screen and (min-width: 480px) { .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: calc(50% - 10px) !important; } } /* Cart table */ .woocommerce table.shop_table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; } /* Checkout columns */ .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { width: 100% !important; float: none !important; padding: 0 !important; } } /* ============================================================ SECTION 11 — FIX #3 — FLATTENED NESTED MEDIA QUERY The original iphone sidebar fix in layout.css used a nested @media inside another @media (invalid CSS Level 3). This rule reproduces that fix as a flat, valid media query. ============================================================ */ @media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 767px) and (min-resolution: 1.5dppx) { #primary.with-left-sidebar, #primary.with-right-sidebar, #primary.with-both-sidebar { display: block !important; float: none !important; width: 100% !important; } } /* ============================================================ SECTION 12 — STORE LOCATOR OVERFLOW FIX ============================================================ */ @media only screen and (max-width: 768px) { .wpsl-stores-fullwidth-container { overflow: hidden; max-width: 100%; } #wpsl-wrap { width: 100% !important; box-sizing: border-box; margin: 20px auto; float: none !important; } .wpsl-input #wpsl-search-input { width: 100% !important; box-sizing: border-box !important; } #wpsl-gmap { max-width: 100% !important; overflow: hidden; } } /* ============================================================ SECTION 13 — MISCELLANEOUS OVERFLOW PATCHES ============================================================ */ @media only screen and (max-width: 768px) { /* Prevent any element with a fixed pixel width wider than viewport from creating horizontal scroll. Cast-all safety net. */ [style*="width:"] { max-width: 100%; } /* Blockquotes on narrow screens */ blockquote.alignleft, blockquote.alignright { width: 100% !important; float: none !important; margin: 0 0 20px !important; } /* Aligned images */ .alignleft, .alignright { float: none !important; display: block !important; margin: 0 auto 15px !important; max-width: 100%; } /* Sticky header fallback — disable sticky on very small screens */ @media only screen and (max-width: 479px) { .is-sticky .main-header-wrapper, .sticky-wrapper .main-header-wrapper { position: relative !important; top: auto !important; } } /* Remove excessive padding on content area on small phones */ @media only screen and (max-width: 479px) { #main { padding: 0 !important; } .dt-sc-section-wrapper, .section-wrapper { padding-top: 30px; padding-bottom: 30px; } } } /* ============================================================ SECTION 14 — SPACING & TOUCH FRIENDLINESS ============================================================ */ @media only screen and (max-width: 768px) { /* Ensure clickable links are spaced enough for fat fingers */ .dt-sc-sociable li a, .footer-copyright .menu-links li a, .breadcrumb a, .entry-meta a, .widget ul li a { display: inline-block; padding: 6px 4px; min-height: 44px; line-height: 44px; } /* Social icon touch targets */ .dt-sc-sociable li { margin-bottom: 4px; } }