Email form submit button not showing, and skewed to the right on mobile.

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

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

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 4 years, 6 months ago by agentrosehq.
• This reply was modified 4 years, 6 months ago by agentrosehq.
• This reply was modified 4 years, 6 months ago by agentrosehq.

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

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 4 years, 6 months ago by agentrosehq.
• This reply was modified 4 years, 6 months ago by agentrosehq.

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

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.

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

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

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

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

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.

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

Worked, thanks!