Ninja forms and mobile display issues

  • Author
    Posts
  • #163828

    nathanaelhomewood
    Member
    Original poster

    Hello!

    I am having an issue with a ninja forms form and the accompanying text not displaying correctly when viewing my page on a mobile device. The block that contains my form is not being resized properly for the mobile screen, with the text in that block, as well as the form itself, being cut off at the sides of the screen. The text and the form do not fit within the screen. Is there anything I can do to fix this issue? Thanks!

    The blog I need help with is: mybennyhinnexperience.com

    #163835

    anarieldesign
    Theme Author

    Hi,

    thank you for using our theme.

    I just checked your contact page and I can’t see any issue, everything looks good. Can you give me more info, screenshot, link to the page where you have this issue? Ninja Forms are not part of the theme so if you need any support for the plugin you’ll need to contact them. But I can help with the look just need more info as I can’t reproduce the issue.

    All the best,
    Ana

    #163840

    nathanaelhomewood
    Member
    Original poster

    Hello,

    The problem occurs when trying to view this page while on mobile devices: https://mybennyhinnexperience.com/submit-your-story/

    The content in the second block, which includes some text and a ninja form, is not being resized to fit within the screen and therefore is cut off by the edges of the screen.
    I do not know how to attach a screenshot to this reply, how would I go about doing that?

    Thank you for your help so far.

    #163841

    anarieldesign
    Theme Author

    Hi,

    I checked your website and this particular page on my Android phone and everything looks good. Can you please share more info, the phone you are using, browser, etc?

    You can upload a screenshot for example on Drive and share the link here.

    All the best,
    Ana

    #163842

    nathanaelhomewood
    Member
    Original poster

    Hello,

    I am using an iPhone and safari.
    So after checking the website on other devices, I see what the issue is somewhat. Using an iPad or a bigger screen is fine, it displays okay. I can also get it to display properly if I rotate my phone. The issue occurs when the phone is not rotated. Is there anything to do to fix that in the theme, or is that more an issue with the phone settings or browser settings?

    As you can see in the files, the other content on the page gets resized just fine, but the second content block does not.

    Here is the link to the screenshots:
    https://drive.google.com/file/d/1YMTQT1pXoI98jTqfjr7BRr3QTTOQqBsS/view?usp=sharing
    https://drive.google.com/file/d/1YMTQT1pXoI98jTqfjr7BRr3QTTOQqBsS/view?usp=sharing

    Thank you again for your help.

    #163847

    anarieldesign
    Theme Author

    Hi,

    you can try to add this to the Custom CSS:

    .page-id-67 .wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
    width: 100%!important;
    }

    Please let me know if this helps.

    All the best,
    Ana

The topic ‘Ninja forms and mobile display issues’ is closed to new replies.