White line on the side of mobile display of modified Spirit Theme

Hello there,

So when viewing my site on a mobile device, there's this white line on the right hand side of the screen. if i choose "desktop view" from the settings menu on the smart phone, it rectifies this.

my friend google tells me that it's possibly this: " There was an extraneous position: relative on an element in the topbar"

How do I fix this?

  • Bojan Radonic
    • Head of Support

    Hey there @Symi, hope you're well today!

    I've checked this on my sandbox site on android device and I'm not really sure which line are you referring to? Would you mind posting link to your site so we can take a look? Alternatively you could grant us temporary admin access so we can check it out. You'll find more info on how to do that by following this link:

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Did you check in upfront editor using responsive mode to see how your mobile version looks and if there is a line there?

    Best regards,
    Bojan

  • Bojan Radonic
    • Head of Support

    Hey there @Symi,

    Thanks for the access, I've checked your site and I can confirm the issue on my android as well. After some testing I've found that the issue was related to your contact form input fields that are larger then the screen size. The reason you can't see it in the upfront editor is because in the editor from is not displayed but only shortcode that you're using.

    With that being said I've managed to fix it with some custom CSS I've added to your site using add custom CSS option in the editor. This is what I added:

    @media screen and (max-width: 400px) {
    textarea.wpcf7-form-control.wpcf7-textarea, input.wpcf7-form-control.wpcf7-text, input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
      max-width: 280px;
    }
    }

    The code is adding maximum width to contact form input fields on resolutions lesser then 400px in width.

    Please let me know if this helps :slight_smile:

    Best regards,
    Bojan

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.