/* ------------------------------------------------------------------ Mobile responsive overrides (added 2026) The original layout (~2009) is a fixed 847px-wide design. Everything here is ADDITIVE: it only takes effect at 800px and below via the media query, so the desktop design is completely unchanged. To remove responsiveness entirely, just delete this file and the two lines added to each page's . ------------------------------------------------------------------ */ /* Let any image scale down to its container instead of forcing overflow */ img { max-width: 100%; height: auto; } @media (max-width: 800px) { html, body { height: auto; } /* Outer shells go fluid */ #wrapper { width: 100%; max-width: 100%; min-height: 0; background: #fff; } #container { width: auto; max-width: 100%; left: 0; float: none; margin: 0; box-sizing: border-box; } /* Left/right breathing room for the text content. The hero image is left full-bleed (edge to edge) on purpose -- it looks better than a boxed-in image on a phone. Footer has its own padding further down. */ #main-content { box-sizing: border-box; padding: 0 20px; } /* Header + hero image */ .head { width: auto; height: auto; } #head-section{ width: auto; height: auto; margin-top: 10px; } #flash { width: auto; height: auto; float: none; margin: 10px 0; } #flash img { width: 100%; height: auto; } h1 { float: none; margin: 15px 0; } /* Main navigation: wrap, centre, and give links tappable spacing */ #main-nav { float: none; display: block; text-align: center; margin: 12px 0; } #main-nav li { float: none; display: inline-block; padding: 4px 6px; margin: 2px; } #main-nav li a { float: none; display: inline; height: auto; font-size: 18px; padding: 0; } /* Content: collapse the multi-column layout into a single column */ #content, #main-content { width: auto; float: none; } #main-content { margin-left: 0; } .secondary-content { width: auto; float: none; border-right: none; padding-right: 0; } .home .secondary-content h2, .team .secondary-content h2, .news .secondary-content h2, .practice-areas .secondary-content h2 { width: auto; float: none; } /* Home intro columns → stacked */ .col-left, .col-right { width: auto; float: none; border-right: none; margin: 0; padding: 0 0 10px 0; } /* Sidebar / services list → full width beneath the content */ #side-bar, #side-bar-image { width: auto; float: none; margin: 20px 0 0 0; } /* Secondary nav (some pages) */ #secondary-nav, #secondary-nav a { width: auto; } /* Any 3-column blocks → stacked */ #column-left, #column-mid, #column-right { width: auto; float: none; border-right: none; margin: 0; padding: 0 0 10px 0; } .back-btn { float: none; } /* Footer */ #footer-wrapper { width: 100%; height: auto; background: #fff; } .footer { width: auto; height: auto; padding: 20px; background: none; box-sizing: border-box; } .footer-left, .footer-right { float: none; width: auto; padding: 0 0 15px 0; } /* The Green17 logo is a background image with text hidden off-screen; on mobile we drop the image and reveal the plain-text link instead */ .footerLogo { float: none; margin: 10px 0 0 0; height: auto; background: none; text-indent: 0; } .footerLogo a { width: auto; height: auto; color: #5e5a5a; } .push { display: none; height: 0; } #footer-wrapper, .footer, .push { height: auto; } } /* ------------------------------------------------------------------ Desktop width bump (added 2026) Widens the original 742px content area by 40px (742 -> 782). Scoped to screens wider than 800px so it never touches the mobile layout. The hero image is set to fill the wider area. Every value below is just the original + 40 (or + 40 on the outer shells) -- change 782 / 887 here to make it wider or narrower. ------------------------------------------------------------------ */ @media (min-width: 801px) { /* The page's drop-shadow graphic (shadow-bg.png) is a fixed 847px wide, so stretch it to cover the new wider wrapper instead of leaving a seam */ #wrapper { width: 887px; background-size: 100% auto; } #container { width: 782px; } .head { width: 782px; } #head-section { width: 782px; height: auto; overflow: hidden; } /* Hero image scales up to fill the wider header instead of leaving a gap */ #flash { width: 782px; height: auto; } #flash img { width: 100%; height: auto; display: block; } #content { width: 782px; } #main-content { width: 782px; } /* Give the extra width to the main text column */ .secondary-content { width: 520px; } .home .secondary-content h2 { width: 520px; } .team .secondary-content h2, .news .secondary-content h2, .practice-areas .secondary-content h2 { width: 460px; } .col-left, .col-right { width: 240px; } #footer-wrapper { width: 887px; background-size: 100% auto; } .footer { width: 821px; } }