Seperating login and register forms on my-account

[Werther]

Hi Guys,

We have an issue with login page.
We use regular Wordpress login however login and register forms are so close to each other.
That is an ugly view and as far as I checked it from the web we can’t convert it into a proper view through regular methods since it is some sort of short code in Wordpress (I may be wrong).

Is there any way that you can guide us to make that page more beautiful as I describe below?

We just want login and register pages one next to the other.

You can check it live through https://www.walkovr.com/my-account

Any help is appreciated.

Best,
Werther

[tristup]

Hi Werther,

Thanks for reaching out.
What you are expecting is required custom development, and beyond the scope of Theme Support. I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.
Still, you can use a small piece of CSS for example code which may help you to adjust the forms in the same line.

#customer_login div
{
    width:49%;
    margin: 10px;
}
#customer_login div:first-child
{
    border-right: 1px solid;
    padding-right: 18px;
}
#customer_login
{
    display: flex;
    flex-direction: row;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[Werther]

Hi @tristup

Thanks, I appreciate the help.
Actually, I thought the pro content forces woocommerce to behave that way, and the normal design is already two columns but as far as I understand from your comment that’s not the issue.

Your CSS guidance almost did work but for the half part of the page:

If that’s already the edge help I can receive then you can close this ticket.
But this may help others actually.

Best,
Werther

[ruenel]

Hey Werther,

You are most welcome.

Tip: You may add width: 100% for the #customer_login to widen the form area. You can also use max-width if you want to limit the width of the forms.

Cheers.

[Werther]

Thanks a lot @ruenel
width: 100% did the trick for the flex part.

Best,
Werther

[prakash_s]

Hello Werther,

Glad that we were able to help you.

Thanks