• Resolved webadminbreak17

    (@webadminbreak17)


    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:

    1. 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.
    2. Viewport meta tag — confirmed via Safari Web Inspector on a real device that no tag is present in this route’s at all.
    3. 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,
    Grant

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Ginger Coolidge

    (@gscoolidge)

    Hello,

    Glad you reached out, happy to help. Thanks for all the details you shared, that helps! Two things to check first.

    1. The easiest way to troubleshoot this is by installing the Health Check plugin. After activating, have it activate a default WordPress theme, and only the core GiveWP plugin and check the receipt issue. Assuming that works as expected, start activating your Elementor components, and so on until you find the culprit. Please let us know what it is.
    2. Otherwise, you should be able to correct this via CSS. The donation receipt is unique in that the global Advanced Settings > Donation Forms > Custom Styles field doesn’t apply there. Instead you’d use the Design step and then Styles > Custom Styles area you referenced. The selectors to use there are .receipt-header-heading p { } and .receipt-header-description p {}, along with your max width setting for mobile.

    Let us know how it goes!

    Have a great rest of your day 🙂

    Plugin Support Ginger Coolidge

    (@gscoolidge)

    Hello again,

    I wanted to share some testing results. I did a test donation using an iPhone15 Pro with Chrome and Safari. The Chrome format was almost perfect, and Safari was a little bit to the right but nothing was off screen that I could see.

    https://loom.com/i/1f75e490f16d421fa6921e186d1c9848

    I hope this helps!

    Plugin Support Ginger Coolidge

    (@gscoolidge)

    It’s been a while since we’ve heard back. I’m marking this topic as resolved for now, but if you still have questions, you can reply right here, and I’ll be happy to hop back in.

    Have a great weekend 🙂

    Thread Starter webadminbreak17

    (@webadminbreak17)

    Sorry for the late reply, I’ve been on holiday.

    Thank you, your advice really helped and I’ve now fixed the problems.

    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.