Multi-Step donation receipt overflows on mobile
-
Hi GiveWP team,
I’m running into a layout bug on the donation confirmation receipt for a Multi-Step form, and I’ve done a fair amount of diagnostic work already that I’m hoping will help you pinpoint it faster.
Site: https://stg-confelicity.break17dev.co.uk (staging)
Theme: Hello Elementor Child
Form: Multi-Step template (Form ID 48)ISSUE:
On real mobile devices (confirmed on Chrome & iOS Safari), the donation confirmation receipt overflows the screen width. The heading, description text, and donor email address run off the right edge and the whole card renders at a fixed ~980px width rather than adapting to the actual viewport. This happens both when the receipt is shown as a popup over the campaign page, and when navigating directly to the isolated route:
https://stg-confelicity.break17dev.co.uk/?givewp-route=donation-confirmation-receipt-view&receipt-id=%5Bid%5D
WHAT I’VE RULED OUT:
- Caching — confirmed via Network response headers on the receipt route: Cache-Control: no-cache, must-revalidate, max-age=0, no-store, private. No CDN or edge cache headers present (no cf-cache-status, x-cache, etc.). I also fully deactivated my page cache plugin (Breeze) and the issue persisted.
- Viewport meta tag — confirmed via Safari Web Inspector on a real device that no tag is present in this route’s at all.
- Standard CSS customization methods — none of the following reach this route:
- GiveWP’s Advanced Settings > Donation Forms > Custom Styles field
- The form’s own per-form Custom CSS field (Design tab)
- Elementor Site Settings Custom CSS
- A functions.php snippet using wp_add_inline_style() targeting both ‘give-sequoia-template-css’ and ‘givewp-form-design-multi-step’ handles, hooked to wp_print_styles
MOST IMPORTANT FINDING:
I added a literal visible marker (a large red tag) via wp_footer, wp_head, and wp_print_styles hooks in functions.php, scoped to fire whenever $_GET[‘givewp-route’] is set. None of the three hooks ever produced visible output on this route — the marker never appeared on the page. This suggests the isolated confirmation-receipt route bypasses WordPress’s standard wp_head/wp_print_styles/wp_footer action sequence entirely, which would explain why every documented CSS customization method (including your own snippet library examples) fails to reach it.Could you let me know:
- Whether this is a known issue with this route/version
- What the correct hook or method is for injecting custom CSS into this specific isolated route, if one exists
- Or whether this is a bug that needs a fix on your end
Happy to provide GiveWP version, full system info export, or temporary access to the staging site if that helps.
Thanks,
GrantThe page I need help with: [log in to see the link]
You must be logged in to reply to this topic.