Custom CSS not working on mobile view

  • Resolved littledinkie

    (@littledinkie)


    1 year ago

    Hi, love the clean simple look of the modal and have customised it for the desktop view which works fine. However when the screen width drops below about 980px the custom CSS is lost and the modal reverts back to the default plugin styling including the large left and right margins.
    I have tried everything to override the default styling including setting a breakpoint of 500px and forcing the width of the modal to 100% and setting the margins to 1px to force the modal to be full width on a mobile screen but nothing works. The code i am using is:

    /* Make login modal full width on mobile */
    @media (max-width: 500px) {
    .login-modal-box .modal-content {
    margin: 1px !important;
    width: 100% !important;
    }
    }

    The website is using Divi but the primary and secondary menus are stock standard (IE: not using a template) as is the page where the login/logout module is placed. The “display as a login form” is not ticked.

    If i can get the width sorted i can then add the other styling. Are you able to provide some pointers or code snippet to get the styling to work on a mobile phone (or be responsive no matter the screen size)?

    Many thanks in advance, Kevin.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Nahuai Badiola

    (@nahuai)

    Hi Kevin.

    Thanks for reaching out.

    I tested your CSS snippet and seem to do the trick. Where are you adding it? Are you using the WordPress customizer or the style.css.

    In any case, try to clear the cache (on the browser and server/plugin) just to be sure that it’s not interfering.

    If you still can’t see the desired style you can share a URL so we can inspect it.

    Best.

    Thread Starter littledinkie

    (@littledinkie)

    Thanks Nahuai,

    I am adding it in the WordPress customizer. I have done a little more research and i think the issue lies with the menu changing when in mobile view. When it changes to a hamburger menu that’s when the CSS is lost.

    The website is not live yet and is behind a maintenance page, but the contact us page is accessible complete with a working login button on the menu: https://trucksafe.net.nz/contact-us/

    If you could take a look and advise your thoughts. Again thank you in advance.

    Kevin

    Plugin Author Nahuai Badiola

    (@nahuai)

    Hi Kevin.

    I’m not able to see the CSS you mentioned on the first support ticket, are you sure it’s on the customizer? Did you change it?
    If you have any cache system, please try to clean it.

    I don’t think the issue it’s related with the mobile menu, it’s because the additional CSS it’s not loaded.

    Please make sure it is and get back to us.

    Best.

    Thread Starter littledinkie

    (@littledinkie)

    Thanks Nahaui,

    I have removed and re-added the code. The site is not using any caching.

    Kev.

    Plugin Author Nahuai Badiola

    (@nahuai)

    Hi Kevin.

    The CSS it’s not loading, that’s why you don’t see the change.

    Can you try adding it on Divi’s additional CSS field or on the style.css directly?

    Let’s see if any of those options achieve to load the CSS.

    Best.

    Thread Starter littledinkie

    (@littledinkie)

    Thanks Nahuai,

    As requested i have moved the CSS and placed it directly in the stylesheet file. It appears to be working. I tweaked the margin and breakpoint and also moved the other modal CSS code to the stylesheet. I’ll get you to double check and confirm ??

    Plugin Author Nahuai Badiola

    (@nahuai)

    Hi Kevin.

    Yes, I can see the CSS applied.
    I’m glad I could help you to get what you wanted. ??

    Best.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Custom CSS not working on mobile view’ is closed to new replies.