Mailpoet Mobile Popup Position

  • Unknown's avatar
    sundayslicers · Member ·

    Hi. It’s in amongst a string on custom CSS code that was there already in the MailPoet section of the site. I’m not at my machine until later, but from within that widgets options, in the Forms section, you design the form, control the way it will appear, and at the bottom of the sections on the right of the screen there’s a Custom CSS section. That has a load of code in, including that string. I can screenshot / copy the code or something, but won’t be for another 4 hours or so. Anything you can do in the meantime would be amazing, particularly if there’s a risk you’ll clock off until Monday before then!

  • Unknown's avatar
    helper-heroponriki · Member ·

    Feel free to copy and paste the code here (you can utilize the /code block to format it properly). Whenever you’re ready to provide it, we’ll have another CSS expert available to assist you in resolving the issue.

  • Unknown's avatar
    sundayslicers · Member ·

    OK, the location is Mailpoet / Forms / Newsletter Signup / Form / Custom CSS. Screenshot / full code from that section below:

    /* form */
.mailpoet_form {
}

form {
  margin-bottom: 0;
}

/* columns */
.mailpoet_column_with_background {
  padding: 0px;
}

.wp-block-column:not(:first-child),
.mailpoet_form_column:not(:first-child) {
 padding: 0 20px;
}

/* space between columns */
.mailpoet_form_column:not(:first-child) {
  margin-left: 0;
}

h2.mailpoet-heading {
  margin: 0 0 20px 0;
}

/* input wrapper (label + input) */
.mailpoet_paragraph {
  line-height:20px;
  margin-bottom: 20px;
}

/* labels */
.mailpoet_segment_label,
.mailpoet_text_label,
.mailpoet_textarea_label,
.mailpoet_select_label,
.mailpoet_radio_label,
.mailpoet_checkbox_label,
.mailpoet_list_label,
.mailpoet_date_label {
  display:block;
  font-weight: normal;
}

/* inputs */
.mailpoet_text,
.mailpoet_textarea,
.mailpoet_select,
.mailpoet_date_month,
.mailpoet_date_day,
.mailpoet_date_year,
.mailpoet_date {
  display:block;
}

.mailpoet_text,
.mailpoet_textarea {
  width: 200px;
}

.mailpoet_checkbox {
}

.mailpoet_submit {
}

.mailpoet_divider {
}

.mailpoet_message {
}

.mailpoet_form_loading {
  width: 30px;
  text-align: center;
  line-height: normal;
}

.mailpoet_form_loading > span {
  width: 5px;
  height: 5px;
  background-color: #5b5b5b;
}

@media (max-width: 500px) {
#mp_form_slide_in1 {
    top: 200px;
    width: 80%;
    min-width: 0px
    margin: 0 auto;
    max-height: 53%;
}

.mailpoet_form_popup_overlay {
    height: auto;
    }
}
  • Unknown's avatar
    sundayslicers · Member ·

    Update: I tried creating an entirely new form, but it just seems to produce the same Custom CSS and has the same issue.

  • Unknown's avatar
    aisajib · Member ·

    Hi,

    What happens if you use the CSS code we provided before and add them to My Site → Appearance → Customize → Additional CSS?

  • Unknown's avatar
    sundayslicers · Member ·

    Hi,

    Nothing different happens. I’ve even tried deleting all the Custom CSS inside the Mailpoet section too, and it’s just the same.

  • aleone89 · Staff ·

    Good morning!

    It looks like we’re there.

    I’ve gone ahead and added this CSS via Appearance > Customize > Additional CSS

    /* Make popup look good 500px+less */

@media (max-width: 500px) {
#mp_form_slide_in1 {
    top: 200px;
    width: 90%;
    min-width: 0px;
    margin: 0 auto;
    max-height: 57%;
}

.mailpoet_form_popup_overlay {
    height: auto;
    }
}

    And this is the result, on screens 500px and below.

    If you’re not seeing this on your end, you would need to clear the browser cache and the browser cache of any device you’re viewing that on. (I’ve checked and double checked this :)). I’ve also cleared the site cache for good measure.

    Update: I tried creating an entirely new form, but it just seems to produce the same Custom CSS and has the same issue.

    I’d recommend moving the CSS of these forms and placing them into the CSS via the Additional CSS panel in the customizer, clearly labelling what the phrases do between comment tags, /* It should look something like this */ .

    Out of curiosity, other than Appearance > Customize > Additional CSS, and the CSS in the forms themselves, has any other custom CSS been added in any other place?

    The reason why I’m just double checking this is because, when applying this, old CSS was still present, (incorrect code that wouldn’t function in any case.)

    If the answer is no, I suspect something weird was happening due to Jetpack’s performance settings > Speed up Static File Load Times setting. I’ve deactivated this, and all seems to be well with the above.

    This is otherwise a great feature, but on occasion, it can apply all kinds of magic to plugins and themes, so not using it, can sometimes fix any overlap with CSS.

    Are you able to confirm you’re seeing the above also – and that all is well?

    Keeping my fingers crossed! :)

  • Unknown's avatar
    sundayslicers · Member ·

    Hi aleone89,

    You sir, are a legend! Finally, I can see a cross on the mobile popup! It actually doesn’t display like your screenshot on my mobile, and drops the picture, but I don’t care about that.

    I have deleted random CSS, but Mailpoet seems to like to add it automatically when creating forms and maybe making changes. I did try adding some this morning to fix another issue, but it didn’t work anyway. Thanks for the tip and action on the Jetpack front.

    Now, at the risk of pushing my luck (sorry), how about my other issues?! I’ve tried live chat, tickets, Themerex tickets, and I’m getting nowhere. Is there any chance we could roll with them here?

  • aleone89 · Staff ·

    Hey there!

    Hooray! :) Glad we’re there!

    I have deleted random CSS, but Mailpoet seems to like to add it automatically when creating forms and maybe making changes. 

    Hmm strange, did you add this originally?

    Now, at the risk of pushing my luck (sorry), how about my other issues?! I’ve tried live chat, tickets, Themerex tickets, and I’m getting nowhere. Is there any chance we could roll with them here?

    Looking at your support history over the last few days, it looks like you’re looking to move your staging site to the live site, is that correct? It looks like you have several tickets open already, so if yes, we can dive into those emails, and look to close this thread so things here don’t get too long winded. :)

    For anything theme related, i.e. logo placement, header navigation placement – ideally you need to speak to the theme developers here. The main reason is because, really our scope of support wouldn’t include supporting these themes and plugins. That said, we try to familiarise ourselves with the site when when working with you and guide you toward the required settings, as we may be accustomed to navigating plugin and theme options for you.

    Notably, we’ve pushed the limits of support we can provide for MailPoet in this instance. :)

    I hope this is all useful!

  • Unknown's avatar
    sundayslicers · Member ·

    Thanks.

    I’ve moved the staging site to production (actually one of your colleagues did it for me), but the header is different and I’m trying to replicate what was on the staging site. I’ve tried getting help on this and associated issues via live chat, email and the theme owner’s support, but it’s incredibly slow, and doesn’t seem to be progressing.

  • aleone89 · Staff ·

    Hey there,

    Got it!

    I’ve moved the staging site to production (actually one of your colleagues did it for me), but the header is different and I’m trying to replicate what was on the staging site.

    We’ll need to revert back on this via that email, as to avoid doubling up. :)

    I’ll take a closer look and respond via that email.

    Speak soon!

1 2
  • The topic ‘Mailpoet Mobile Popup Position’ is closed to new replies.