Mobile View Not Displaying Well Popup

  • Resolved alois2020

    (@alois2020)


    4 years, 5 months ago

    Good day,

    I have configured the pop up and on desktop it displays well but on mobile view its at the bottom and fill halfway the screen instead of popping up the same way it does on desktop

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Bruna a11n

    (@bruberries)

    4 years, 5 months ago

    Hi @alois2020,

    That’s the expected behavior for pop-up forms when displayed on mobile. If you want to change that, you could use CSS to edit its position.

    This is where you’d make the changes:

    @media (max-width: 500px)
    #mp_form_popup1

    As an example, you can set the max-height to something higher than 40% so it doesn’t fill only half of the screen.

    I hope it helps!

    • This reply was modified 4 years, 5 months ago by Bruna a11n.
    Thread Starter alois2020

    (@alois2020)

    4 years, 5 months ago

    Okay, how do I disable it for mobile view so that it only shows on desktop

    Plugin Support Dani F. a11n

    (@danielinhou)

    4 years, 5 months ago

    Hi again @alois2020 👋🏽,

    While there’s not a custom option to disable it for a mobile view, you could use this CSS snippet to hide it:

    
@media (max-width: 500px) {
.mailpoet_form_popup_overlay.mailpoet_form_overlay_animation_slideup.mailpoet_form_overlay_animation.active, div#mp_form_popup1{
    display: none;
}
}

    Please note that there is not a universal setting for the max-width value that should be used so give it a try and feel free to modify that ‘500px’ value to another one such as ‘768px’ if you think that will work best for your site.

    Cheers!

    Thread Starter alois2020

    (@alois2020)

    4 years, 5 months ago

    I have customized as advised but now I am getting different views. In Mailpoet it views well but on actual site it displays as stacked instead of side by side

    Plugin Support Dani F. a11n

    (@danielinhou)

    4 years, 5 months ago

    Hi again @alois2020 👋🏽,

    Could you please share a link to a URL where I can see the form and the issue? That would help me find a solution for you.

    Thanks

    Thread Starter alois2020

    (@alois2020)

    4 years, 5 months ago

    marblelightcandles.com

    Plugin Author Bruna a11n

    (@bruberries)

    4 years, 5 months ago

    By checking your website, I believe that’s what is affecting the form display on desktop:

    .mailpoet_form_tight_container .mailpoet_stack_on_mobile .mailpoet_form_column {
    flex-basis: 100% !important;
}

    Could you please apply that for @media (max-width: 500px) only and let us know if it works?

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

The topic ‘Mobile View Not Displaying Well Popup’ is closed to new replies.