MailPoet Pop up not displaying entirely

  • Resolved mmw2023

    (@mmw2023)


    1 year, 10 months ago

    When the pop up displays for a new person on any page, it doesn’t display properly. It is only a third on the page. I recall this working when I first set it up, but it no longer is. I don’t have any conflicts with other plugins from what I can tell. See attached image for a visual representation of my issue. Please let me know how to fix it. Also, see below for the custom CSS info.

    /* 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;

}

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter mmw2023

    (@mmw2023)

    Home – MAKER MADE.jpeg (750×1334)
    I’m not sure how to get this image in here. Let me know if this link works for you.

    Plugin Author Bruna a11n

    (@bruberries)

    Hi @mmw2023,

    Unfortunately, the image link doesn’t work. But I think I get the problem when accessing your website and checking the pop-up form.

    I see the column where the content of the form is placed is currently at 75%, and that’s why you see so much space left on the right side.

    Please try adding flex-basis: 100% !important; to .mailpoet_form_column and let me know if it works!

    Thread Starter mmw2023

    (@mmw2023)

    @bruberries it isn’t an issue with the desktop version. It’s all with the mobile version. I’ve added it to this page so you can see it. I’d expect it the form to appear on the entire screen of the phone and not just on the bottom 25% where the user has to scroll down to realize it’s part of a subscribe form.
    https://makermadewellness.com/subscribe/

    Plugin Author Bruna a11n

    (@bruberries)

    Hi @mmw2023,

    I see you contacted us via email about it and we will follow-up with this issue there, okay?

    To change the pop-up form to be in the centre of the screen for the mobile version, you need to change the CSS:
    @media (max-width: 500px) #mp_form_popup1 {
    ????max-height: 60%;
    ????top: 20%;
    }

    Plugin Author Bruna a11n

    (@bruberries)

    Just a correction!

    The right CSS code is:

    @media (max-width: 500px) { #mp_form_popup1 {
    max-height: 60%;
    top: 20%;
    }
    }

    Thread Starter mmw2023

    (@mmw2023)

    @media (max-width: 500px) { #mp_form_popup1 {
    max-height: 80% !important;
    top: 10% !important;
    }
    }

    This fixed the problem. 60% still didn’t extend it far enough. Thank you to the team for helping me solve the issue.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘MailPoet Pop up not displaying entirely’ is closed to new replies.