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

Comments

  •  16
    HelloPixely started the conversation
    October 24, 2021 at 8:16pm

    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

  •  2,960
    Andrew replied
    October 25, 2021 at 5:16am

    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
    HelloPixely replied
    October 25, 2021 at 8:39am

    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

  •  2,960
    Andrew replied
    October 26, 2021 at 4:52am

    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
    HelloPixely replied
    October 26, 2021 at 11:23am

    Hi Andrew,

    Thanks for your reply.

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

    Thanks,

    Amine

  •  2,960
    Andrew replied
    October 26, 2021 at 1:24pm

    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
    HelloPixely replied
    October 27, 2021 at 6:50am

    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

  •  2,960
    Andrew replied
    October 27, 2021 at 12:03pm

    Hello Amine,

    Try the following.

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

    Regards,

  •  16
    HelloPixely replied
    October 27, 2021 at 8:05pm

    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

  •  1,878
    Judith replied
    October 27, 2021 at 8:39pm

    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
    HelloPixely replied
    October 27, 2021 at 11:34pm

    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

  •  2,960
    Andrew replied
    October 28, 2021 at 5:13am

    Hi again,

    Try this instead.

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

    Regards,

  •  16
    HelloPixely replied
    October 28, 2021 at 8:52am

    Hi Andrew,

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

    Thanks,

    Amine

  •  2,960
    Andrew replied
    October 28, 2021 at 9:02am

    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
    HelloPixely replied
    October 28, 2021 at 10:55am

    Hi Andrew,

    That's perfect.

    Thank you.

    Amine

  •  16
    HelloPixely replied
    November 3, 2021 at 10:30pm

    Hi Andrew, 

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

  •  1,878
    Judith replied
    November 4, 2021 at 5:26am

    Hello,

    Please try this css:

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

    Thanks.