Can we adjust the gaps between each log in field?

Hello,

Inside the “Customize Login Form” from LoginPress Customizer, you will see this option: Input Text Field Margin under the title INPUT FIELDS. You can set it to 0px. This will make your form look like this, reducing the top margin: View Screenshot

Now, if you also want to remove the space under the labels, you can use this Custom CSS in the LoginPress Custom CSS option: (This is how your form will look like now: View Screenshot)

.login label {
  margin: 0;
}

For the “Remember Me” textbox and the “Login” button spacing, use this Custom CSS: (This is how your form will look like now: View Screenshot)

.login form .forgetmenot{
    margin-top: -10px;
}
.wp-core-ui #login .button-primary {
    margin-top: 5px;
}

I hope this will help you setting the spacing for the form as you want. You can adjust the values as per your choice.

Let me know if you need further help! ??

Hello,

Thank you for such a fast and helpful reply! I will try this out and reply with my results so others can know too.

May I ask is there a way to make this responsive for different device sizes? I know in wordpress Appearance -> Customize, there is an option to view it in desktop, tablet and mobile mode, but that is only a visual appearance, it doesn’t change the mode that the design will be actually set for, if you know what I mean.

You’re welcome!

Although the design is already made responsive for different device sizes, if you still want to customize it, you need to use media queries in Custom CSS. For example:

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

If you expect to choose a mode (Desktop/Tablet/Mobile) and customize the login form specifically for that mode. This is not currently possible in WordPress Customizer. As you said, they are used for visual appearance only.

Hey stephunique,

Have you tried out the solution I provided you? Let me know so we can resolve this ticket ASAP.

Thank you!

Hello Emma,

Thanks for following up with my enquiry. I am not a developer and only know basic code, I can and am trying out your solution but it takes a little time because I have to do a lot of trial and error.

But actually I was also going to write back with some feedback:

I did some testing with the Custom CSS: Because the Custom CSS?effects do not update live, this is annoying since I need to purge the cache and do a hard refresh for every single change I make to see the effect, and then as I said I am not a developer so I need to do trial and error. I am having a little trouble seeing the difference between the adjustments I make with the custom CSS – either they do not work or the difference is too subtle to see.

The other thing I wanted to say is, the email addresss and password field seems to be bound together in one container or div (forgive me if the exact element is not correct), because any adjustments I make in the padding and margins affect both of them at the same time, ie, they move together as one item and I cannot adjust the distance between them. This is a little annoying because I intend on using an image for the background that I want to align the input fields and labels with.

And I have not tested the responsive code yet, I will do that when I get the custom CSS correct, then use that to edit the responsive version of CSS.

Thank you.

Hi stephunique,

I understand it might be difficult and sometimes annoying for a non-developer. That’s why the support is here! ?? Please feel free to reach out on our support forum so I can help set things up for you on your site. Your time and effort will be saved.

Regarding the email address and password fields, you can apply your desired CSS to these elements:

/* set bottom spacing for email address field */
#loginform input[type="text"]{
 margin-bottom: 30px;
}
/* set bottom spacing for password field */
#loginform input[type="password"]{
 margin-bottom: 30px !important;
}

Hope this will help!

Hello @emma24,

Thank you for your help. I will try out the code myself and if I still need help, I will contact your support as you suggested. In the meantime I will mark this support thread as resolved. Thanks and have a nice day!