Okay
  Public Ticket #2901716
WooCommerce - Lost your password Page
Closed

Comments

  •  16
    Amine started the conversation

    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

  •  3,147
    Andrew replied

    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,

  •  16
    Amine replied

    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

  •  3,147
    Andrew replied

    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,

  •  16
    Amine replied

    Hi Andrew,

    Thanks for your reply.

    I didn't work, have a look what I see on my screen.

    Thanks,

    Amine

  •  3,147
    Andrew replied

    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,

  •  16
    Amine replied

    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

  •  3,147
    Andrew replied

    Hello Amine,

    Try the following.

    .woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password {
        margin: 18vh auto;
    }
    

    Regards,

  •  16
    Amine replied

    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

  •  2,065
    Judith replied

    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.

  •  16
    Amine replied

    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

  •  3,147
    Andrew replied

    Hi again,

    Try this instead.

    .woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password button.woocommerce-Button.button {
        width: -webkit-fill-available;
    }
    

    Regards,

  •  16
    Amine replied

    Hi Andrew,

    That's much better but on the phone I get this, please see attachment.

    Thanks,

    Amine

  •  3,147
    Andrew replied

    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,

  •  16
    Amine replied

    Hi Andrew,

    That's perfect.

    Thank you.

    Amine

  •  16
    Amine replied

    Hi Andrew, 

    Actually on mobile the width isn’t exactly the same like the field. I think there is 1px missing from each side.

  •  2,065
    Judith replied

    Hello,

    Please try this css:

    .woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password button.woocommerce-Button.button {
        width: 101%;
        left: -2px;
    }

    Thanks.