/** * Mobile / Tablet Responsive Fixes * * Corrects layout and type problems that only appear below Divi's desktop * breakpoint (981px). The goal throughout is the desktop look and feel, * rescaled - not a different mobile design. * * Divi breakpoints used here: * - tablet: 768px - 980px * - phone: <= 767px * * Selectors are prefixed with #et-boc (the Theme Builder wrapper) so they beat * Divi's own generated `.et_pb_text_0 { display: none !important }` rules, which * are printed inline in after this stylesheet and would otherwise win on * source order. Page-body fixes are additionally scoped to `body.home` because * Divi's numbered module classes (.et_pb_text_0, .et_pb_heading_0, ...) are * per-page indexes and mean something different on every other page. */ /* ========================================================================== 1. Content hidden below 981px - restore it -------------------------------------------------------------------------- These modules have Divi's "Disable on Tablet / Disable on Phone" toggles set, so real content simply vanishes on anything narrower than a desktop. Besides looking broken (each leaves a block of empty space behind), CSS-hidden copy is discounted under mobile-first indexing, so this also costs SEO. ========================================================================== */ @media only screen and (max-width: 980px) { /* "Our Home of the Week" - address, bed/bath/garage/sq-ft list and both descriptive paragraphs. Without this the column is just the price banner. */ body.home #et-boc .et_pb_text_0, /* "Your Kansas & Missouri Home Builder..." - the entire three-paragraph About Ashlar Homes body copy, i.e. the page's main SEO text. */ body.home #et-boc .et_pb_text_5 { display: block !important; } } @media only screen and (max-width: 767px) { /* "Ashlar Homes: Designed For Your Life" - the section heading above the three floor-plan cards. */ body.home #et-boc .dipi_divider_0 { display: block !important; } } /* Footer (global, not homepage-only). Row 0 = brand text + logo. Row 2 = copyright, Privacy Policy link and the five social icons. Both are hidden below 981px, which leaves ~240px of empty navy under the contact columns and drops the Privacy Policy link from every mobile page - worth fixing on its own for disclosure reasons. */ @media only screen and (max-width: 980px) { #et-boc .et_pb_row_0_tb_footer, #et-boc .et_pb_image_0_tb_footer, #et-boc .et_pb_row_2_tb_footer { display: block !important; } /* Match the stacked-column alignment of the rest of the mobile footer. Row 0's logo sits in a 1/4 column that goes full width once the columns stack, so it otherwise lands hard right at close to 300px wide. */ #et-boc .et_pb_row_2_tb_footer { text-align: center; } /* The logo module keeps its desktop right-alignment and a fixed module width, so once the columns stack it hangs off to one side. */ #et-boc .et_pb_image_0_tb_footer { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; text-align: center; } #et-boc .et_pb_image_0_tb_footer .et_pb_image_wrap, #et-boc .et_pb_image_0_tb_footer img { display: inline-block; max-width: 200px; width: 100%; height: auto; } #et-boc .et_pb_row_2_tb_footer .et_pb_social_media_follow { text-align: center; margin-top: 16px; } } /* ========================================================================== 2. Headings that never scale down -------------------------------------------------------------------------- These modules carry a desktop font size with no tablet/phone override, so a 65-81px display face is rendered at full size inside a ~300px column. Sizes below step the desktop values down proportionally rather than restyling. ========================================================================== */ /* "Our Home of the Week" - 81px/81px at every width; wraps to four lines and nearly doubles the height of its section on a phone. */ @media only screen and (max-width: 980px) { body.home #et-boc .et_pb_section_1 h1, body.home #et-boc .et_pb_section_1 h2, body.home #et-boc .et_pb_section_1 h3 { font-size: 48px !important; line-height: 1.15em !important; } } @media only screen and (max-width: 767px) { body.home #et-boc .et_pb_section_1 h1, body.home #et-boc .et_pb_section_1 h2, body.home #et-boc .et_pb_section_1 h3 { font-size: 34px !important; line-height: 1.2em !important; } } /* The two navy band headings ("Our Buyers Love Us." / "At Ashlar Homes, We Build Community"). Their 48px phone size was set for the short mobile-only string that dc_drop_mismatched_mobile_headings removes; the desktop wording they now inherit needs one more step down on a phone to stay under four lines. */ @media only screen and (max-width: 767px) { body.home #et-boc .et_pb_heading_2 h1, body.home #et-boc .et_pb_heading_2 h2, body.home #et-boc .et_pb_heading_3 h1, body.home #et-boc .et_pb_heading_3 h2 { font-size: 36px !important; line-height: 1.15em !important; } } /* "4.99% Financing*" (65px) and "For a limited time only!" (41px) in the Home of the Week column - both fixed-size, both overrun their column. */ @media only screen and (max-width: 980px) { body.home #et-boc .et_pb_heading_0 h1, body.home #et-boc .et_pb_heading_0 h2 { font-size: 44px !important; line-height: 1.15em !important; } body.home #et-boc .et_pb_heading_1 h1, body.home #et-boc .et_pb_heading_1 h2 { font-size: 30px !important; line-height: 1.2em !important; } } /* Once the two columns stack, the price heading's desktop -31px top margin (which pulled it level with the image in the left column) drags it up against the "Check out our move-in ready home" button. */ @media only screen and (max-width: 980px) { body.home #et-boc .et_pb_heading_0 { margin-top: 10px !important; } } @media only screen and (max-width: 767px) { body.home #et-boc .et_pb_heading_0 h1, body.home #et-boc .et_pb_heading_0 h2 { font-size: 34px !important; line-height: 1.2em !important; } body.home #et-boc .et_pb_heading_1 h1, body.home #et-boc .et_pb_heading_1 h2 { font-size: 24px !important; line-height: 1.25em !important; } } /* ========================================================================== 3. Hero slider -------------------------------------------------------------------------- The slider runs ~900px tall on a 844px-tall phone screen while its text box is only ~64% of the viewport wide (80% of an 80% container), so headlines wrap hard inside a narrow column surrounded by empty space. ========================================================================== */ @media only screen and (max-width: 767px) { body.home #et-boc .et_pb_fullwidth_slider_0 .et_pb_container { width: 90% !important; } body.home #et-boc .et_pb_fullwidth_slider_0 .et_pb_slide_description { width: 100% !important; max-width: 100% !important; padding: 44px 24px !important; } /* Slide 1's title drops to 20px/20px - smaller than the other five slides (26px) and with zero leading. Bring it in line with its siblings. */ body.home #et-boc .et_pb_slide_0 .et_pb_slide_title { font-size: 26px !important; line-height: 1.25em !important; } /* Long CTA labels ("EXPLORE TIMBER RIDGE") wrap to two lines in a button that is sized for one. */ body.home #et-boc .et_pb_fullwidth_slider_0 .et_pb_button { font-size: 14px !important; padding: 12px 20px !important; } } /* ========================================================================== 4. Community map section -------------------------------------------------------------------------- The 800px map height is deliberate and matches production, so it is left alone. What does need correcting is the empty space beneath it: the section carries a ~887px min-height and the navy band below it a 249px top margin. Both are sized for a 1440px canvas and read as a dead screenful on a phone. ========================================================================== */ @media only screen and (max-width: 980px) { /* Let the section hug the map instead of holding a desktop-sized floor. */ body.home #et-boc .et_pb_section_5 { min-height: 0 !important; } /* Gap between the map and the "At Ashlar Homes, We Build Community" band. */ body.home #et-boc .et_pb_section_6 { margin-top: 80px !important; } } @media only screen and (max-width: 767px) { body.home #et-boc .et_pb_section_6 { margin-top: 50px !important; } } /* ========================================================================== 5. FAQ accordion -------------------------------------------------------------------------- Toggle titles are 16px with a 16px line-height. On desktop they fit one line so it never shows; on mobile every title wraps and the lines collide. ========================================================================== */ @media only screen and (max-width: 980px) { body.home #et-boc .et_pb_accordion_0 .et_pb_toggle_title { line-height: 1.35em !important; padding-bottom: 4px; } /* The section headings rendered by the Divi Plus divider module fall back to left alignment on mobile; desktop centres them. */ body.home #et-boc .dipi_divider_0 .dipi-divider-text, body.home #et-boc .dipi_divider_1 .dipi-divider-text, body.home #et-boc .dipi_divider_0, body.home #et-boc .dipi_divider_1 { text-align: center; } } /* ========================================================================== 6. Footer type scale -------------------------------------------------------------------------- Footer blurb titles and body text render at 22px on a phone against 16px on desktop, so the smallest screen gets the largest text. ========================================================================== */ @media only screen and (max-width: 767px) { #et-boc .et_pb_row_1_tb_footer .et_pb_module_header { font-size: 17px !important; line-height: 1.4em !important; } #et-boc .et_pb_row_1_tb_footer .et_pb_blurb_description, #et-boc .et_pb_row_1_tb_footer .et_pb_blurb_description p, #et-boc .et_pb_row_1_tb_footer .et_pb_blurb_container p { font-size: 16px !important; line-height: 1.6em !important; } } /* ========================================================================== 7. Header -------------------------------------------------------------------------- Two problems below 981px: a) The utility bar (For Realtors / Email Us / Call Us) stacks into three full-width rows and consumes ~235px before the nav even starts. b) The logo is hidden (see the pre-existing rule in customizer-overrides.css), leaving a bare hamburger with no branding and no click target back to home. ========================================================================== */ @media only screen and (max-width: 980px) { /* (a) Tighten the stacked utility blurbs. */ #et-boc .et_pb_row_0_tb_header { padding-top: 10px !important; padding-bottom: 10px !important; } #et-boc .et_pb_row_0_tb_header .et_pb_column { margin-bottom: 10px !important; } #et-boc .et_pb_row_0_tb_header .et_pb_column:last-child { margin-bottom: 0 !important; } /* (b) Put the logo back, on the same line as the hamburger. customizer-overrides.css forces this container to `display: block` and hides the logo wrap; restore a flex row so logo and toggle sit opposite each other the way the desktop header reads. */ #et-boc header .et_pb_menu_0_tb_header .et_pb_menu_inner_container { display: flex !important; align-items: center; justify-content: space-between; /* The bar's height came entirely from the logo wrap's bottom margin, which is zeroed below; put that breathing room back symmetrically so the bar keeps roughly its original depth. */ padding: 14px 0; } #et-boc header .et_pb_menu_0_tb_header .et_pb_menu__logo-wrap { display: block !important; flex: 0 0 auto; /* Divi gives the logo wrap a 30px bottom margin for its centred-logo layout. Flex centres the margin box, so that margin alone pushes the logo to the top of the bar; drop it and the logo lines up with the hamburger. */ align-self: center; margin-bottom: 0 !important; } #et-boc header .et_pb_menu_0_tb_header .et_pb_menu__wrap { flex: 1 1 auto; justify-content: flex-end; } #et-boc header .et_pb_menu_0_tb_header .et_pb_menu__logo img { max-height: 52px !important; width: auto !important; } }