Support » Plugin: Hustle - Email Marketing, Lead Generation, Optins, Popups » Email form submit button not showing, and skewed to the right on mobile.

  • Resolved agentrosehq

    (@agentrosehq)


    How do I make this slide-in fit the entire width of mobile instead of skewing it to the left, and how do I make it show the actual submit button? Looks fine on desktop but is a terrible mobile experience.

    Example here: https://flic.kr/p/2j3HNyX
    Page example here, just scroll and it’ll pop up: https://agentrosehq.com/aib-chapter-1/

    This happens no matter what browser I’m on on mobile, even though collapsing the site to mobile on desktop is fine.

    I tried exporting and making this a popup- same format problem. How do I fix this for any format? Thanks.

    • This topic was modified 1 year, 8 months ago by agentrosehq.

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

Viewing 14 replies - 1 through 14 (of 14 total)
  • Thread Starter agentrosehq

    (@agentrosehq)

    EDIT: on desktop collapse it looks bad too. I can’t see the button and there’s the same skew.

    Plugin Support Pawel – WPMU DEV Support

    (@wpmudev-support9)

    Hello @agentrosehq

    I trust you’re doing well!

    Please add this CSS code to Appearance > Custumizer > Additional CSS.

    @media screen and (max-width: 992px) {
    .hustle-slidein-content {
        position: relative;
        right: 30px !important;
        bottom:30px;
    }
    }

    This will position the slider in the middle for mobile devices.

    Kind regards,
    Nastia

    Thread Starter agentrosehq

    (@agentrosehq)

    Hi Nastia,
    Unfortunately it still looks skewed but now the other way (the “J” in join is cut off a bit in mobile, and the last line of text is cut off in desktop view) (on desktop, tried both chrome and firefox collapsed to mobile and both have this issue) – is there any CSS that will make it centered and not dependent on a # of pixels that might just be a guess for different devices, which is probably what you’re doing here?

    I’m not sure what would cause this skew in the first place – it seems weird to have to fix this with additional css if this is a problem with the base code itself.

    • This reply was modified 1 year, 8 months ago by agentrosehq.
    • This reply was modified 1 year, 8 months ago by agentrosehq.
    • This reply was modified 1 year, 8 months ago by agentrosehq.
    Plugin Support Pawel – WPMU DEV Support

    (@wpmudev-support9)

    Hello @agentrosehq

    I trust you’re doing well!

    The above code is only applied for mobile devices and not affecting the desktop view.

    For the last line on a text, for a desktop view please try this CSS:

    @media screen and (min-width: 992px) {
    .hustle-slidein-content {
        position: relative;
        bottom:30px;
    }
    }

    Please share here a screenshot of how the slide-in is showing up from your end? Let us know what mobile device you’re using. Here is how the slide in is shown from my end:
    https://take.ms/qsdJu

    Please advise,

    Kind regards,
    Nastia

    Thread Starter agentrosehq

    (@agentrosehq)

    Hello,
    I’ve tried adding the above code and it doesn’t change the desktop skew. Today it looks a little less cut off on the left hand side, but I worry it’ll skew more on a different day (on the side where it says “Join). It still has that left skew overall.

    Desktop collapse view: https://www.flickr.com/photos/agentrosehq/49932582742/in/dateposted-public/

    • This reply was modified 1 year, 8 months ago by agentrosehq.
    • This reply was modified 1 year, 8 months ago by agentrosehq.
    Plugin Support Pawel – WPMU DEV Support

    (@wpmudev-support9)

    Hello @agentrosehq

    I trust you’re doing well!

    I’m afraid I can’t replicate this behavior, I’ve visited your site and the slide in is centered. Please see this screenshot:
    https://monosnap.com/file/fu868PofVCqu4HSgFnfIl2Ay5TXyEE

    To test actual appearance in a mobile device, please try out Google Chrome’s mobile emulator:
    https://developers.google.com/web/tools/chrome-devtools/device-mode

    Please use the mobile emulator, as it is approximate shows how your site looks and on a mobile device. It follows the actual mobile devices sizes

    Have a good day!

    Cheers,
    Nastia

    Thread Starter agentrosehq

    (@agentrosehq)

    There’s actually a desktop problem that’s more urgent, see this: https://flic.kr/p/2j7EUa7

    The bottom of the embed cuts off many lines of text as well as the submit button, please let me know how to fix.

    Plugin Support Pawel – WPMU DEV Support

    (@wpmudev-support9)

    Hello @agentrosehq

    I hope you’re doing well!

    Please try adding !important tag to the CSS that was provided above. Make sure this code is added to Appearance > Custumize > Additional CSS:

    @media screen and (min-width: 992px) {
    .hustle-slidein-content {
        position: relative;
        bottom:30px !important;
    }
    }

    Please note the !important tag can’t be overwritten, so if the same CSS class needs to be edited, please edit that CSS above.

    KInd regards,
    Nastia

    Thread Starter agentrosehq

    (@agentrosehq)

    I tried that and the bottom still doesn’t show, looks the same.

    Plugin Support Prathamesh – WPMU DEV Support

    (@wpmudev-support7)

    Hello @agentrosehq,

    It worked for me when I added !important. Can you try to add it, clear the cache and then check? If that does not help, kindly keep the added to and let us know here so to check that further.

    Here is what I added:

    .hustle-layout-content {
        position: relative !important;
        bottom: 30px !important;
    }
    

    I’m looking forward to hearing from you on it.

    Regards,
    Prathamesh Palve

    Plugin Support Pawel – WPMU DEV Support

    (@wpmudev-support9)

    Hello @agentrosehq

    I hope you are doing well!

    We haven’t heard back from you for a while now so we’ve marked this ticket as resolved. If you do have any followup questions or require further assistance feel free to reopen it and let us know here.

    Kind regards,
    Nastia

    Thread Starter agentrosehq

    (@agentrosehq)

    I’ve put in the code above and now the bottom shows but the top is cut off scroll down on https://agentrosehq.com/aib-chapter-2-3/
    to see the problem. The “thank you” in the picture is cut off.

    Plugin Support Pawel – WPMU DEV Support

    (@wpmudev-support9)

    Hello @agentrosehq

    I trust you’re doing well!

    I apologize for the delay here. I could see that an image was cut off at the top. Please try this CSS

     .hustle-slidein-content {
         padding-bottom: 30px !important;
     }

    Please advise,

    Kind regards,
    Nastia

    Thread Starter agentrosehq

    (@agentrosehq)

    Worked, thanks!

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Email form submit button not showing, and skewed to the right on mobile.’ is closed to new replies.