Responsive behaviour across all breakpoints · Generated March 2026
| Style Class | Breakpoint | Issue | Status |
|---|---|---|---|
ui-button-filled-light |
main (base) | margin-left: auto causes right-push when used outside header flex context (e.g. hero sections, CTAs in cards) |
⚠ Active Issue |
ui-button-filled-light |
medium | Now has margin-left: 0px + height: auto — correct for header, but may affect standalone usages on tablet |
👁 Watch |
button-outlined-black |
medium | Has height: 40px (fixed), while ui-button-filled-light is height: auto — mismatched heights between paired buttons |
⚠ Fix Needed |
button-outlined-black |
small / main | No explicit height: auto override at small — inherits 50px from main, may appear tall on mobile |
👁 Watch |
header-nav-link |
medium | Font shrinks to 13px at medium — visually consistent but check all 5 nav items still fit without wrapping | ✓ OK |
dropdown-toggle-text |
medium | Font shrinks to 13px — matches nav-link, consistent | ✓ OK |
Standalone — note how it hugs the left because it's in a block context here. On the live site it has margin-left: auto which pushes it right.
margin-left: auto on the main breakpoint means this button right-aligns itself in any block or flex container unless a parent overrides it. This is intentional in some page contexts (e.g. aligning to the right in a two-column CTA) but causes problems in centered or stacked layouts.
⚠ Looks small compared to desktop. Check hero/CTA sections on tablet viewport.
height: auto — good for the header. But check whether standalone CTAs on the actual pages look too small at tablet width. If so, the medium overrides should only apply inside .header scope, not globally.
⚠ Sign in is 40px fixed, Start for free is ~37px auto — subtle but visible misalignment
✓ Both auto — consistent height driven by padding
button-outlined-black to height: auto at the medium breakpoint to match ui-button-filled-light. Currently the outlined button is slightly taller which causes the pair to misalign in the header.
This button inherits height: 50px at small. Verify it isn't appearing in mobile menus where it might look oversized.
flex-shrink:1 on header-nav should let them compress, but verify no wrapping occurs on the actual site.Create Beautiful Memorial Videos
Design funeral services in minutes with easy-to-use templates.
ui-button-filled-light has margin-left: auto at the base breakpoint. In a centred flex container this works fine — but in a block/column context without text-align:center or align-items:center on the parent, the button will shift right. Audit each page section individually.
margin-left: auto issue. It likely uses a different class — verify on the live pages.
| # | Fix | Style · Breakpoint | Priority |
|---|---|---|---|
| 1 | Change height: 40px → height: auto on button-outlined-black at medium so it matches the filled button height |
button-outlined-black · medium |
High |
| 2 | Audit each page's hero/CTA sections on a 768–991px viewport to check if margin-left: auto on the base style is pushing buttons right unexpectedly |
ui-button-filled-light · main |
High |
| 3 | Add height: auto to button-outlined-black at small breakpoint to prevent inheriting the 50px fixed height on mobile |
button-outlined-black · small |
Medium |
| 4 | Test the medium breakpoint at exactly 768–820px to confirm all 5 nav items + 2 buttons fit without wrapping. If they wrap, either widen the hamburger breakpoint or reduce nav to icons-only at that size. | header-nav · medium |
Medium |
| 5 | Consider creating a ui-button-filled-light is-centered combo class for standalone CTA contexts that resets margin-left: 0 cleanly without polluting the base class |
New combo class | Low |
// Webflow Style Tool call
update_style({
style_name: "button-outlined-black",
breakpoint_id: "medium",
properties: [
{ property_name: "height", property_value: "auto" }
]
})
This aligns the outlined and filled buttons at the same visual height on tablet, driven by their shared padding: 8px 12px.