Mobile Background image form broken

  • Resolved mrpal

    (@mrpal)


    1 year, 3 months ago

    Hello everyone, I’m writing to you because I’m encountering some problems with the plugin, I’ve tried to fix it myself but I’m not having any success.

    The problem: 

    I created a newsletter signup form, it has a background image. More or less everything is okay in the browser version but when I switch to the mobile version the image disappears and consequently the white text on it becomes invisible having the white background of the site, so everything becomes unusable.

    I read on this forum that this is normal behavior, I read what was proposed to do but they didn’t work for me. Also, the code placed in Appearance > Customize > Additional CSS doesn’t work for me either.

    I’ll list the plugins I’m currently using and what I’ve tried to do so far. 

    My Theme: Royal Addons. 

    Plugins:

    • Akismet Anti-spam 
    • Duplicate Page 
    • Easy Table of Contents 
    • Elementor 
    • GTranslate 
    • Hostinger Tools 
    • iubenda 
    • LiteSpeed Cache 
    • Royal Elementor Addons 
    • Site Kit by Google 
    • The SEO Framework 
    • Wordfence

    What I’ve tried to do:

    • Inserting the following CSS code in Appearance > Customize > Additional CSS: 

    @media (max-width: 500px) { 

    #mailpoet_form_2 { 

    background-image: url(https://whereispal.it/wp-content/uploads/2025/01/Sfondo-Modulo-Newsletter.jpg) !important; 

    display: block !important; 

    } 

    #mailpoet_form_2 > form * { 

    color: black !important; 

    } 

    } 

    But this doesn’t work, in the mobile preview on WordPress I see everything correctly. I clear the cache, go to my mobile phone and it doesn’t work: the background image is not shown and the text remains white.

    • Then I wanted to do another test, using the developer tools I saw that ‘Background-image: none’ is set with the 500px media query, so I tried to modify the plugin in mailpoet/lib/Form/Util/Styles.php and delete the parameter on line 231: ‘background-image: none;’, I cleared the cache, I published everything but the background is still not shown on mobile.

    Do you have any idea how I could solve this?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter mrpal

    (@mrpal)

    1 year, 3 months ago

    Update:
    I edited the code in the first message, removed the fallback for black text (#mailpoet_form_2 > form *), and added the code to style.css in the Theme Editor. I cleared the cache using LiteSpeed, downloaded Chrome, Firefox, and Brave on an iPhone 16 Pro, and tested the site:

    • On Safari (mobile, both incognito and normal): The form is broken, and the background doesn’t appear. I also tested it on a friend’s phone (who had never visited the site), and it appeared broken for them as well.
    • On Chrome (both incognito and normal): The form still shows the changes from yesterday (background image visible with black text) instead of the updated version (background visible with white text).
    • On Firefox (both incognito and normal): The form appears correctly on some links, broken on others, and in some cases shows the changes from yesterday (background image with black text instead of white).
    • On Brave (any case): The form is always broken.

    I’m a bit confused at this point—could it be a caching issue?

    Plugin Support Lynn J.a11n

    (@lynnjat7)

    1 year, 3 months ago

    Hi @mrpal,

    Thanks for the updates and details here. Please start by making sure you are using the correct form tag (#mailpoet_form_2) for the form in question.

    It sounds like your CSS works at least *some* of the time which really sounds like a potential caching issue. Please deactivate LiteSpeed as a starting test to see if that resolves the issue. If not, please do run a full conflict test on the site; start with only MailPoet active and a default theme like Twenty Twenty, then restore plugins one at a time to find the one that is overwriting the CSS you have entered here.

    We do not debug custom code as part of our support and custom code offered on our site is offered as a courtesy only. We do recommend that you work with a developer if you require additional help. In addition, this reference on how to design a good mobile popup might help:
    https://www.mailpoet.com/blog/how-to-create-mobile-friendly-email-signup-forms-on-wordpress/

    That said, if you suspect a bug please share a link to a page on your site where we can view the form. I did try this site -> https://whereispal.it -> but no form appeared.

    Plugin Support Kel C. a11n

    (@kellymetal)

    1 year, 1 month ago

    Hi there,

    We haven’t heard back from you in a while, so I’m going to mark this as resolved. If you have any further questions, please start a new thread.

    Thank you!

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

The topic ‘Mobile Background image form broken’ is closed to new replies.