Hi team,
Our off-canvas login panel opened through the header account icon displays oversized labels and a truncated “Remember me” text.
Typography findings
DevTools shows the following scaling:
– .header-bottom uses --content-zoom: calc(119em * .01), generated in kirki-styles.
– The account panel uses --content-zoom: calc(100em * .01).
– account.min.css explicitly applies font-size: 114% to the account login labels and lost-password link.
With a 14px starting size, the header scaling produces 16.66px, and the additional label scaling produces 18.9924px.
Changing Header Builder → Account → Dropdown → Content Size (%) from 100 to 80 gives an acceptable appearance in our test. However, this compensates for the compounded scaling rather than providing independent control over the login typography.
Separate truncation issue
The Dutch “Remember me” text, “Ingelogd blijven”, remains truncated even after reducing the panel scale. DevTools identifies a max-width: 80px restriction on input#rememberme + span in general-all.min.css. Temporarily disabling that declaration makes the full text visible.
I’ve added a temporary solution to our global CSS on row 1259:
.et_b_header-account.login-link.et-off-canvas
.et-mini-content input#rememberme + span {
max-width: none;
}
Requested structural solution
Could you please clarify:
1. Is the explicit 114% scaling standard XStore behaviour, and why is it applied on top of the inherited header size?
2. Which setting generates the 119% bottom-header scaling, and can the account panel’s typography be made independent of it?
3. Can we disable or directly configure these scaling factors for the login panel, without changing other header elements?
4. Can the fixed 80px restriction on the “Remember me” text be removed or made configurable to accommodate translations?
Our preferred solution is native, independent control over the off-canvas login typography, without editing theme files or stacking CSS overrides. The 80% panel setting is an acceptable temporary workaround.
Any permanent solution must remain limited to this account panel and must not affect the regular My Account page, other WooCommerce forms, or typography elsewhere on the website.
DevTools screenshots are available showing the relevant declarations and computed sizes.
