Mobile Welcome Form Broken * Image Attached

  • spaceinsects

    (@spaceinsects)


    2 years, 1 month ago

    On my website: New tab (spaceinsects.art) I set up an awesome looking welcome form, on Desktop it’s great but on Mobile the background image and other image i added are not displayed.

    Link to images:

    https://ibb.co/Nn2xGWx
    https://ibb.co/8PYqbn1

    I would love to have the same background on the mobile version as well.. i guess an alternative would be to simply use some of the colours you already have for background but it’s looking super dull…

    Is there a way for example to edit only the mobile version while the desktop stays the way it is?

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • con

    (@conschneider)

    Engineer

    2 years, 1 month ago

    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,

    Thread Starter spaceinsects

    (@spaceinsects)

    2 years, 1 month ago

    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?

    Thread Starter spaceinsects

    (@spaceinsects)

    2 years, 1 month ago

    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?

    Thread Starter spaceinsects

    (@spaceinsects)

    2 years, 1 month ago

    Any Update?

    Elvira K.

    (@treibalen)

    2 years ago

    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!

    Thread Starter spaceinsects

    (@spaceinsects)

    2 years ago

    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

    Plugin Support Kel C. a11n

    (@kellymetal)

    2 years ago

    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.

    Thread Starter spaceinsects

    (@spaceinsects)

    2 years ago

    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?

    Plugin Support Kel C. a11n

    (@kellymetal)

    2 years ago

    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.

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

The topic ‘Mobile Welcome Form Broken * Image Attached’ is closed to new replies.

  • 9 replies
  • 4 participants
  • Last reply from: