/* * mobile.css — Responsive overrides for willandestatelaw.com * Add to every page after screen.css: * * * Breakpoints: * 768px and below = tablet * 480px and below = phone */ /* ============================================================ GLOBAL — applies at ALL screen sizes Prevents any image from ever exceeding its container width ============================================================ */ img { max-width: 100%; height: auto; } /* ============================================================= TABLET — 768px and below Makes the 960 grid stack into single column layout ============================================================= */ @media screen and (max-width: 958px) { /* Fluid container */ .container_12, .container_16 { width: 95%; padding: 0 15px; box-sizing: border-box; } /* All grid columns become full width and stack */ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 { display: block; float: none; width: 100% !important; margin-left: 0; margin-right: 0; box-sizing: border-box; } /* Logo scales to fit */ .logo img { max-width: 100%; height: auto; margin-left: auto; margin-right: auto; } /* Promo/banner image scales to fit */ .promo img { max-width: 100%; height: auto !important; } /* Form fields go full width */ .standardForm .textbox { width: 100%; box-sizing: border-box; } .standardForm .textarea { width: 100%; box-sizing: border-box; } .standardForm .button { width: 100%; box-sizing: border-box; } /* Footer social icons — center instead of float right */ .social.right { float: none; text-align: center; display: block; margin-top: 10px; } .social li { display: inline-block; margin: 5px; } .social li a { display: inline-block; padding: 10px; } /* Footer disclaimer text */ #footer .grid_8, #footer .grid_4 { text-align: left; } /* Widget area padding */ .widget-area { padding: 10px 0; } /* Header padding reduction */ #header { padding: 10px 0 8px 0; } /* Promo container margin reduction */ .promo-container { margin-bottom: 20px; } /* --------------------------------------------------------- MOBILE NAVIGATION Hamburger menu button — shown only on mobile --------------------------------------------------------- */ /* Hamburger button */ .mobile-menu-toggle { display: block; background: #555555; /* Background color of mobile hamburger menu. */ color: #fff; border: none; padding: 14px 20px; font-size: 1.2em; cursor: pointer; width: 100%; text-align: left; margin-bottom: 0; } .mobile-menu-toggle:hover { background: #444; } /* Hide desktop menu by default on mobile */ ul.sf-menu { display: none; width: 100%; margin: 0; padding: 0; } /* Show menu when toggle is active */ ul.sf-menu.mobile-open { display: block; } /* Top-level menu items stack vertically */ ul.sf-menu > li { display: block; float: none; width: 100%; border-bottom: 1px solid #555; margin: 0; } ul.sf-menu > li > a { display: block; padding: 14px 20px; background: #333; color: #fff !important; font-size: 1.05em; text-decoration: none; } ul.sf-menu > li > a:hover { background: #444; } /* Sub-menus — show as static indented items */ ul.sf-menu li ul { display: block !important; position: static !important; visibility: visible !important; opacity: 1 !important; background: #444; width: 100% !important; box-shadow: none; border: none; margin: 0; padding: 0; } ul.sf-menu li ul li { display: block; float: none; width: 100%; border-top: 1px solid #555; } ul.sf-menu li ul li a { display: block; padding: 12px 20px 12px 35px; background: #444; color: #ddd !important; font-size: 0.95em; text-decoration: none; } ul.sf-menu li ul li a:hover { background: #555; color: #fff !important; } } /* ============================================================= HIDE hamburger button on desktop ============================================================= */ @media screen and (min-width: 959px) { .mobile-menu-toggle { display: none; } } /* ============================================================= PHONE — 480px and below Additional refinements for small phone screens ============================================================= */ @media screen and (max-width: 480px) { /* Slightly smaller base font for very small screens */ body { font-size: 0.95em; } /* Scale down large headings */ h2 { font-size: 1.6em; } h3 { font-size: 1.4em; } h4 { font-size: 1.2em; } h5 { font-size: 1.1em; } h6 { font-size: 1.0em; } /* Contact info easier to read */ .contactinfo { font-size: 1.05em; line-height: 160%; } /* Reduce paragraph bottom padding */ p, h1, h2, h3, h4, h5, h6 { padding: 0 0 12px 0; } /* Form labels slightly smaller */ .standardForm label { font-size: 1.1em; } /* Checkbox disclaimer text wraps cleanly */ .standardForm .contactinfo.pjustify { font-size: 0.9em; line-height: 150%; } /* Footer stacks cleanly */ #footer { padding: 15px 0 30px 0; } /* Tighter promo area */ .promo-container { margin-bottom: 10px; } } /* ============================================================= TEAM PAGE PHOTO Desktop: floats right, max 33% width Mobile: full width, centered ============================================================= */ /* Desktop default — float right, max 33% of container */ .team-photo { float: right; width: 35%; max-width: 350px; /* hard cap so it never gets huge on wide monitors */ height: auto; margin: 0 0 5px 20px; display: block; } /* Tablet — slightly larger since content column is narrower */ @media screen and (max-width: 958px) { .team-photo { float: right; width: 40%; max-width: 300px; height: auto; margin: 0 0 5px 15px; display: block; } } /* Phone — full width, centered, no float */ @media screen and (max-width: 480px) { .team-photo { float: none; width: 100%; max-width: 100%; height: auto; margin: 0 auto 15px auto; display: block; } }