fixed bottom positioning on mobile

  • Resolved Sabina

    (@pessimisticoptimist)


    5 months ago

    Hello!

    We have a CTA pop-up positioned at the bottom of browser window, but on mobile phones it won’t move to the bottom of the screen once you start scrolling down the page and the toolbar collapses. I’ve tried everything I can think of to specify an absolute position of bottom: 0px in CSS, with no luck. What am I overlooking?

    For reference, we’d like it to behave the same way on mobile as the bottom CTA here: https://www.dowjanes.com/

    Thanks!

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Jamie P.

    (@jamiepineda)

    4 months, 4 weeks ago

    Hi @pessimisticoptimist

    We’re sorry to hear you’re having trouble with your CTA popup.

    Just to confirm, are you referring to the Popup Bar (sticky popup) at the bottom of the screen?

    If so, we checked your site on a mobile, and we were able to see it: https://share.zight.com/7Ku9W0wZ

    Could you try the following to isolate the issue:

    1. Retest using a private or incognito window.
    2. Retest using a different device.
    3. Disable any optimization or minification plugins.
    4. Clear all caches, including your browser (on all devices), caching plugins, and server/CDN caches. Here’s a helpful guide: https://ww.wp.xz.cn/documentation/article/faq-i-make-changes-and-nothing-happens/

    Let us know how it goes.

    Thread Starter Sabina

    (@pessimisticoptimist)

    4 months, 4 weeks ago

    Hi Jamie! Correct, there is no problem with the Popup appearing, that’s not the issue I’m asking about.

    The problem is the absolute positioning on mobile; it’s not sticking to the bottom of the screen. When you begin to scroll and the browser navigation bar sinks down, the popup banner doesn’t move to the bottom of the screen but instead just floats leaving a gap. Screenshot here showing what I mean. We’d like to get rid of the area circled in red when the browser bar isn’t there.

    The behavior we were expecting for the stick to bottom positioning is illustrated on the Dow Janes site I gave as example–when the browser navigation slides down, the popup bar slides down too.

    Plugin Support Kim L

    (@kimmyx)

    4 months, 3 weeks ago

    Hi @pessimisticoptimist,

    Thanks for the response. Please try the following solution:

    1. Disable Fixed Position in “Popup Settings” > “Display” > “Position“.
    2. Add the following CSS snippet:
    #pum-xxx .pum-container { /* replace xxx with your popup ID */
        top: auto !important;
        bottom: 0px !important;
        margin: 0 !important;
        position: fixed !important;
    }

    Let us know how it goes. 🙏

    Thread Starter Sabina

    (@pessimisticoptimist)

    4 months, 3 weeks ago

    Yes, that works! Thanks so much for your help.

    -Sabina

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

You must be logged in to reply to this topic.