Mobile Welcome Form Broken * Image Attached

Hi there!

Here is what I see on my mobile: https://d.pr/i/MtFGIG
It seems the background is rendered ok. Am I testing this correctly?

Kind regards,

Hello,

As you can see from the first image

welcomeform hosted at ImgBB — ImgBB

the background of the popup is a image i set myself. Also on top of it i have a vector image of the eye… why is it not showing on mobile like it shows on desktop?

also note that im actually wanting to replace the background u see on the bottom of the webpage where it says “Join the psychedelic Awakening” with the one you see on the desktop version. So the background you’re looking at is from a module im going to remove as soon as i fix the popup window from mail poet. Do you get me?

Any Update?

Hi there @spaceinsects,

Thanks for getting back to us!

Background and other images are removed from mobile device pop-up forms for responsiveness.

However, you can force it to be displayed with this CSS code:

@media screen and (max-width: 499px) {
.mailpoet_form_image {
display: block;
}
}

Let me know how it goes!

Hey i tried it, screenshot attached with how i pasted the code(i just pasted it on the last line of the custom css option on the form in mailpoet) Please note that on my form i have 1. background image 2.vector image on top. With the code it seems that the vector image has appeared but the background image is still not there, image attached, Let me know if i’ve pasted the code correctly thanks

https://ibb.co/v1qQ70n
https://ibb.co/fxdkVT1

Hi there @spaceinsects,

Just to clarify: the “Custom CSS” section in the Form Editor doesn’t accept media queries (i.e. max-width: 499px, etc), so that would need to be added in the “Additional CSS” section of your customizer under Appearance > Customize.

As for the form background, as mentioned, it’s removed by default on mobile devices. However, you can force it to display by setting the background for mobile screen widths with something like this:

@media (max-width: 500px) {
  #mp_form_popup1 {
    background: url(https://spaceinsects.art/wp-content/uploads/2023/01/wallapaper-scaled.webp) center / cover no-repeat !important;
  }
}

Again though, that will need to be added in the customizer, rather than form editor.

• This reply was modified 11 months, 3 weeks ago by kellymetal a11n.

Hey!

So your final fix worked out for me and I’m incredibly grateful.

I have only one final question, since I’m unable to customize mobile/desktop separately I have an issue where on the mobile version the vector file which is this eye shape on top of the welcome form is covering up the text ..

Is there a way to disable the vector image on the mobile phone version only?

Hi there @spaceinsects,

I see that vector image has a class applied: wp-image-654, so to remove that specific image on mobile, you should be able to use this snippet:

@media screen and (max-width: 500px) {
  .wp-image-654 {
    display: none;
  }
}

Again, that will need to be added in the customizer, rather than form editor.