, and the right column's field groups each render 2-3 separate
tags (vs. the left column's fields, which happen to collapse into a single
). The parent theme's ".wpcf7 form.wpcf7-form p { margin-bottom: 1.75em; }" (style.css) out-specifies a plain class rule, so every one of those
tags was silently stacking ~20-30px of extra trailing margin — that invisible margin, not the intentional gap below, is what made the right column render far taller. Same bug as the long registration form's .cc-reg-wrap fix; has to be matched ancestor-for-ancestor to win. */ .wpcf7 form.wpcf7-form .cl-sf-wrap p { margin-bottom: 0; } /* Left column: underline-style text fields. Each field is now its own
(blank line between shortcodes in the form template — previously all 6 ran together into a single
, which meant this flex gap had no effect at all: a single flex item ignores gap). justify-content: space-between plus align-items: stretch on .cl-sf-wrap makes this column stretch to match whichever column is naturally taller, then spreads the 6 fields evenly across that full height — so both columns start and end flush. */ .cl-sf-fields { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; } .cl-sf-fields .wpcf7-form-control-wrap { display: block; } .cl-sf-fields input, .cl-sf-fields select { width: 100%; box-sizing: border-box; border: none; border-bottom: 1px solid #cfcfcf; background: transparent; padding: 9px 4px; font-size: 15px; color: #405d6d; font-family: poppins, sans-serif; } .cl-sf-fields input:focus, .cl-sf-fields select:focus { outline: none; border-bottom-color: #ec008c; } /* Right column: Business License / FEIN / Tax Certificate uploads, stacked. Same stretch + space-between approach as .cl-sf-fields — whichever column is naturally shorter fills out to match the taller one. */ .cl-sf-uploads { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; } .cl-sf-or-divider { text-align: center; margin: 2px 0; } .cl-sf-or-divider span { display: inline-block; font-family: poppins, sans-serif; font-size: 11px; font-weight: 600; color: #a8b8c2; letter-spacing: 2px; text-transform: uppercase; border: 1px solid #d6ceca; border-radius: 50%; width: 32px; height: 32px; line-height: 30px; } .cl-sf-optional-label { font-family: poppins, sans-serif; font-size: 18px; font-weight: 400; color: #222; margin: 0 0 -8px; } /* Bottom row: opt-in + submit, spans both columns, left-aligned */ .cl-sf-bottom { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .cl-sf-optin { display: flex; align-items: center; gap: 8px; color: #405d6d; font-size: 14px; font-family: poppins, sans-serif; } .cl-sf-optin .wpcf7-list-item { margin: 0; } .cl-sf-bottom input[type=submit] { background: #ec008c; color: #fff; border: none; padding: 16px 44px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; font-family: poppins, sans-serif; align-self: flex-start; transition: background .2s; } .cl-sf-bottom input[type=submit]:hover { background: #c60074; } /* honeypot: keep out of sight but present */ .cl-sf-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 780px) { .cl-sf-wrap { grid-template-columns: 1fr; gap: 24px; } .cl-sf-bottom input[type=submit] { align-self: stretch; text-align: center; } /* Hero banner: the "START A COSMETIC LINE WITH COLORLAB" text is baked into the bg image (1366x340, ~4:1). cover crops it on mobile — instead fit it to the full width so the whole banner shows, and collapse the tall hero so the GET STARTED button sits just below it. */ /* Banner is 24.9vw tall at full width; give the hero a fixed mobile height that fits the banner, with the GET STARTED button overlaid on the picture just below the baked-in headline (matching desktop). (The content wrapper is absolutely positioned, so the hero can't auto-size to it — a fixed vw height is required. JS sets 408px inline.) */ /* Banner scaled to 169% width (130% x another 30% taller) => 42vw tall picture, centered (crops more of each tan side edge). Hero height matches the banner so the button sits ON the image, not below it. */ #pg-3648-0 li.sow-slider-image.sow-slider-image-cover { background-size: 169% auto !important; background-position: top center !important; background-repeat: no-repeat !important; min-height: 42vw !important; height: 42vw !important; } #pg-3648-0 .sow-slider-base, #pg-3648-0 .sow-slider-images, #pg-3648-0 .sow-slider-image-container { min-height: 42vw !important; height: 42vw !important; } #pg-3648-0 .sow-slider-image-wrapper { padding: 27.5vw 0 0 !important; /* button sits on the banner, just below the baked-in headline (ends ~24.8vw) */ } /* Center the GET STARTED button under the picture. The inline padding-right:25% lives on a
nested inside a wrapper div, so match it as a descendant (not a direct child). */ #pg-3648-0 .sow-slider-image-wrapper p { padding-right: 0 !important; padding-left: 0 !important; text-align: center !important; } #pg-3648-0 .sow-hero-buttons { display: flex !important; justify-content: center !important; text-align: center !important; } #pg-3648-0 .sow-hero-buttons .so-widget-sow-button, #pg-3648-0 .sow-hero-buttons .ow-button-base { margin-left: auto !important; margin-right: auto !important; } /* "How to Start a Makeup Line in 3 Easy Steps": the flex-wrap steps go 2 + 1 at tablet widths, leaving step #3 centered/misaligned. Force one step per row so #1/#2/#3 all align. */ .gs-steps > div { flex: 0 0 100% !important; max-width: 100% !important; } /* "Why Work With Colorlab": 4 columns are flex-wrap:nowrap and cram side-by-side on mobile. Wrap + stack them one per row so "Hundreds of Ready to Wear Items" and "High Margins for You" stack. */ .gs-why { flex-wrap: wrap !important; gap: 20px !important; } .gs-why > div { flex: 0 0 100% !important; max-width: 100% !important; } }