Form too narrow on iPhone 16 screen

  • Resolved andynick

    (@andynick)


    3 months, 1 week ago

    I’m impressed with the LoginPress plugin generally, but I can’t get the form to go out wide enough on an iPhone screen. There’s too much space down either side, and a huge blank area above the Logo (with no apparent way to reduce it).
    Of course, I tried adjusting the width in the controls, but the form stayed the same on mobile.
    I used the same logo image for desktop and mobile, if that makes any difference.

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Abdul Wahab

    (@abdulwahab610)

    3 months ago

    Hey, @andynick

    Thank you for your kind words about LoginPress, really glad you’re liking it 🙂
    The issue you’re facing on mobile is usually due to default spacing and width limits applied on smaller screens. You can easily fix this with a bit of custom CSS.

    Please add the following CSS in:
    LoginPress → Customizer → LoginPress → Custom CSS / JS → Custom CSS
    Helping guide: https://loginpress.pro/doc/add-custom-css-js/

    @media (max-width: 767px){
     #login {
      max-width: 500px !important;
      width: calc(100% - 30px) !important;
     }
     .login h1 a, .login .wp-login-logo a{
      height: auto !important;
      aspect-ratio: 4/3 !important;
     }
    }

    This will:

    • Expand the login form width properly on mobile
    • Reduce unnecessary side spacing
    • Adjust the logo area to remove the large blank space above it

    After adding, please clear your cache (if any) and check again on your iPhone.
    If you still notice spacing issues, feel free to share a screenshot. I’ll fine-tune it further for you 👍

    Best,

    Thread Starter andynick

    (@andynick)

    3 months ago

    EXCELLENT!
    Thank you so much. That worked perfectly!
    Andy

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

You must be logged in to reply to this topic.