How can I keep the form of Lost your password the same as the login or register page, like here https://znapy.com/my-account/
As you can see from the screenshots attached below, the form for the login/register is in the middle of the page and then Lost your password page the form moves to the left and very long.
Hi,
How can I keep the form of Lost your password the same as the login or register page, like here https://znapy.com/my-account/
As you can see from the screenshots attached below, the form for the login/register is in the middle of the page and then Lost your password page the form moves to the left and very long.
Many thanks,
Amine
Hello Amine,
Use the following CSS>
.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password { text-align: center; } .woocommerce-lost-password .woocommerce-form-row.form-row { width: 100%; } .woocommerce-lost-password .woocommerce-form-row.form-row input#user_login { width: 49%; }
Regards,
Hi Andrew,
This is really good.
How to keep the width the same like login or register. In the Lost your password Page is it very long now.
I would like to keep it consistent.
Many thanks,
Amine
Hi again,
Please discard the previous CSS and use this instead.
.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password { text-align: center; width: 59%; margin: auto; } .woocommerce-lost-password .woocommerce-form-row.form-row { width: 100%; }
Regards,
Hi Andrew,
Thanks for your reply.
I didn't work, have a look what I see on my screen.
Thanks,
Amine
Hello Amine,
Seems the CSS does not work on bigger screens, use this instead.
.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password { text-align: center; width: 59%; margin: auto; max-width: 550px; } .woocommerce-lost-password .woocommerce-form-row.form-row { width: 100%; }
Regards,
Hi Andrew,
This is great. It looks a lot better now.
Any chance to keep the same height like in the login/Register page?
Please see screenshots attached.
Thanks,
Amine
Hello Amine,
Try the following.
.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password { margin: 18vh auto; }
Regards,
Hi Andrew,
This is great.
This is my last request on this one.
Can you send me the CSS to keep 'Reset Password' button same width like 'Log In' or 'Register' button.
Many thanks,
Amine
Hi There,
Please try this css:
body[data-form-submit="default"] .container-wrap input[type=submit], body[data-form-submit="regular"] .container-wrap input[type=submit], body[data-form-submit="regular"] .container-wrap button[type=submit]:not(.search-widget-btn), body[data-form-submit="see-through"] .container-wrap input[type=submit], body[data-form-submit="see-through"] .container-wrap button[type=submit]:not(.search-widget-btn), body[data-button-style="rounded"].ascend .container-wrap input[type="submit"], body[data-button-style="rounded"].ascend .container-wrap button[type="submit"]:not(.search-widget-btn), .wc-proceed-to-checkout .button.checkout-button, .woocommerce #order_review #payment #place_order, body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce-page button[type="submit"].single_add_to_cart_button, body[data-form-submit="regular"].woocommerce-page .container-wrap button[type=submit].single_add_to_cart_button, .nectar-post-grid-wrap .load-more, .row .wpforms-form button[type="submit"] {
width: 546px;
}
Thanks.
Hi Judith,
Are you sure about this code?
It has to target the value="Reset password" and not the type="submit"
Please see screenshot as the code effected other buttons.
Thanks,
Amine
Hi again,
Try this instead.
.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password button.woocommerce-Button.button { width: -webkit-fill-available; }
Regards,
Hi Andrew,
That's much better but on the phone I get this, please see attachment.
Thanks,
Amine
Hello Again,
Use the following CSS.
@media only screen and (max-width: 690px){ .woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password { width: 100%; } }
Regards,
Hi Andrew,
That's perfect.
Thank you.
Amine
Hi Andrew,
Actually on mobile the width isn’t exactly the same like the field. I think there is 1px missing from each side.
Hello,
Please try this css:
.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password button.woocommerce-Button.button {
width: 101%;
left: -2px;
}
Thanks.