Font Size Issues
Some websites that explicitly define a root-level font-size using px values might unintentionally override the default Whereabouts widgets (which uses rem values).
For example some sites we have worked with have root-level css styles like:
<style>
html {font-size:10px !important}
</style>
This will result in very small fonts in all widgets.
To fix this problem and return all Whereabouts widgets to their defaults, add the following to your global CSS, or at least on every page where a Whereabouts widget appears.
And, of course, you could also pick and choose which variables you want to override:
whereabouts-events-widget, whereabouts-event-submit-widget, whereabouts-operators-widget, whereabouts-whats-nearby-widget, whereabouts-booker-widget {
/* ======================
🎨 Radii
====================== */
--wa-radii-0: 0; /* 0 */
--wa-radii-25: 2px; /* 0.125rem */
--wa-radii-50: 4px; /* 0.25rem */
--wa-radii-75: 6px; /* 0.375rem */
--wa-radii-100: 8px; /* 0.5rem */
--wa-radii-150: 12px; /* 0.75rem */
--wa-radii-200: 16px; /* 1rem */
--wa-radii-250: 20px; /* 1.25rem */
--wa-radii-300: 24px; /* 1.5rem */
--wa-radii-400: 32px; /* 2rem */
--wa-radii-xs: 2px; /* 0.125rem */
--wa-radii-sm: 4px; /* 0.25rem */
--wa-radii-md: 6px; /* 0.375rem */
--wa-radii-lg: 8px; /* 0.5rem */
--wa-radii-xl: 12px; /* 0.75rem */
--wa-radii-2xl: 16px; /* 1rem */
--wa-radii-3xl: 24px; /* 1.5rem */
--wa-radii-4xl: 32px; /* 2rem */
--wa-radii-full: 9999px; /* 9999px */
/* ======================
📏 Sizes
====================== */
--wa-sizes-0: 0px; /* 0rem */
--wa-sizes-1: 4px; /* 0.25rem */
--wa-sizes-2: 8px; /* 0.5rem */
--wa-sizes-3: 12px; /* 0.75rem */
--wa-sizes-4: 16px; /* 1rem */
--wa-sizes-5: 20px; /* 1.25rem */
--wa-sizes-6: 24px; /* 1.5rem */
--wa-sizes-7: 28px; /* 1.75rem */
--wa-sizes-8: 32px; /* 2rem */
--wa-sizes-9: 36px; /* 2.25rem */
--wa-sizes-10: 40px; /* 2.5rem */
--wa-sizes-11: 44px; /* 2.75rem */
--wa-sizes-12: 48px; /* 3rem */
--wa-sizes-14: 56px; /* 3.5rem */
--wa-sizes-16: 64px; /* 4rem */
--wa-sizes-20: 80px; /* 5rem */
--wa-sizes-24: 96px; /* 6rem */
--wa-sizes-28: 112px; /* 7rem */
--wa-sizes-32: 128px; /* 8rem */
--wa-sizes-36: 144px; /* 9rem */
--wa-sizes-40: 160px; /* 10rem */
--wa-sizes-44: 176px; /* 11rem */
--wa-sizes-48: 192px; /* 12rem */
--wa-sizes-52: 208px; /* 13rem */
--wa-sizes-56: 224px; /* 14rem */
--wa-sizes-60: 240px; /* 15rem */
--wa-sizes-64: 256px; /* 16rem */
--wa-sizes-72: 288px; /* 18rem */
--wa-sizes-80: 320px; /* 20rem */
--wa-sizes-96: 384px; /* 24rem */
--wa-sizes-0\.5: 2px; /* 0.125rem */
--wa-sizes-1\.5: 6px; /* 0.375rem */
--wa-sizes-2\.5: 10px; /* 0.625rem */
--wa-sizes-3\.5: 14px; /* 0.875rem */
--wa-sizes-xs: 320px; /* 20rem */
--wa-sizes-sm: 384px; /* 24rem */
--wa-sizes-md: 448px; /* 28rem */
--wa-sizes-lg: 512px; /* 32rem */
--wa-sizes-xl: 576px; /* 36rem */
--wa-sizes-2xl: 672px; /* 42rem */
--wa-sizes-3xl: 768px; /* 48rem */
--wa-sizes-4xl: 896px; /* 56rem */
--wa-sizes-5xl: 1024px; /* 64rem */
--wa-sizes-6xl: 1152px; /* 72rem */
--wa-sizes-7xl: 1280px; /* 80rem */
--wa-sizes-8xl: 1440px; /* 90rem */
/* ======================
📐 Spacing
====================== */
--wa-spacing-0: 0px; /* 0rem */
--wa-spacing-1: 4px; /* 0.25rem */
--wa-spacing-2: 8px; /* 0.5rem */
--wa-spacing-3: 12px; /* 0.75rem */
--wa-spacing-4: 16px; /* 1rem */
--wa-spacing-5: 20px; /* 1.25rem */
--wa-spacing-6: 24px; /* 1.5rem */
--wa-spacing-7: 28px; /* 1.75rem */
--wa-spacing-8: 32px; /* 2rem */
--wa-spacing-9: 36px; /* 2.25rem */
--wa-spacing-10: 40px; /* 2.5rem */
--wa-spacing-11: 44px; /* 2.75rem */
--wa-spacing-12: 48px; /* 3rem */
--wa-spacing-14: 56px; /* 3.5rem */
--wa-spacing-16: 64px; /* 4rem */
--wa-spacing-20: 80px; /* 5rem */
--wa-spacing-24: 96px; /* 6rem */
--wa-spacing-25: 2px; /* 0.125rem */
--wa-spacing-28: 112px; /* 7rem */
--wa-spacing-32: 128px; /* 8rem */
--wa-spacing-36: 144px; /* 9rem */
--wa-spacing-40: 160px; /* 10rem */
--wa-spacing-44: 176px; /* 11rem */
--wa-spacing-48: 192px; /* 12rem */
--wa-spacing-50: 4px; /* 0.25rem */
--wa-spacing-52: 208px; /* 13rem */
--wa-spacing-56: 224px; /* 14rem */
--wa-spacing-60: 240px; /* 15rem */
--wa-spacing-64: 256px; /* 16rem */
--wa-spacing-72: 288px; /* 18rem */
--wa-spacing-75: 6px; /* 0.375rem */
--wa-spacing-80: 320px; /* 20rem */
--wa-spacing-96: 384px; /* 24rem */
--wa-spacing-100: 8px; /* 0.5rem */
--wa-spacing-150: 12px; /* 0.75rem */
--wa-spacing-200: 16px; /* 1rem */
--wa-spacing-250: 20px; /* 1.25rem */
--wa-spacing-300: 24px; /* 1.5rem */
--wa-spacing-400: 32px; /* 2rem */
--wa-spacing-500: 40px; /* 2.5rem */
--wa-spacing-600: 48px; /* 3rem */
--wa-spacing-800: 64px; /* 4rem */
--wa-spacing-1000: 80px; /* 5rem */
--wa-spacing-0\.5: 2px; /* 0.125rem */
--wa-spacing-1\.5: 6px; /* 0.375rem */
--wa-spacing-2\.5: 10px; /* 0.625rem */
--wa-spacing-3\.5: 14px; /* 0.875rem */
/* ======================
🧾 Line Heights
====================== */
--wa-line-heights-none: 1;
--wa-line-heights-tight: 1.25;
--wa-line-heights-snug: 1.375;
--wa-line-heights-normal: 1.5;
--wa-line-heights-relaxed: 1.625;
--wa-line-heights-loose: 2;
--wa-line-heights-2xs: 16px; /* 1rem */
--wa-line-heights-xs: 22px; /* 1.375rem */
--wa-line-heights-sm: 24px; /* 1.5rem */
--wa-line-heights-md: 28px; /* 1.75rem */
--wa-line-heights-lg: 32px; /* 2rem */
--wa-line-heights-xl: 36px; /* 2.25rem */
--wa-line-heights-2xl: 40px; /* 2.5rem */
--wa-line-heights-3xl: 48px; /* 3rem */
--wa-line-heights-4xl: 60px; /* 3.75rem */
/* ======================
🔠 Font Sizes
====================== */
--wa-font-sizes-6xl: 60px; /* 3.75rem */
--wa-font-sizes-7xl: 72px; /* 4.5rem */
--wa-font-sizes-8xl: 96px; /* 6rem */
--wa-font-sizes-9xl: 128px; /* 8rem */
--wa-font-sizes-2xs: 13px; /* 0.813rem */
--wa-font-sizes-xs: 14px; /* 0.875rem */
--wa-font-sizes-sm: 15px; /* 0.938rem */
--wa-font-sizes-md: 16px; /* 1rem */
--wa-font-sizes-lg: 18px; /* 1.125rem */
--wa-font-sizes-xl: 20px; /* 1.25rem */
--wa-font-sizes-2xl: 24px; /* 1.5rem */
--wa-font-sizes-3xl: 32px; /* 2rem */
--wa-font-sizes-4xl: 36px; /* 2.25rem */
--wa-font-sizes-5xl: 48px; /* 3rem */
}