My Account Login Page (WooCommerce) - Support | Kriesi.at

Tagged: login, my account, password, woocommerce

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
October 5, 2015 at 4:21 pm #513895

richardelectrix
Participant

Hi

How can I move the ‘Remember Me’ and ‘Lost Password’ so they go alongside the log in button as this …

http://screencast.com/t/QRCAVlroCA

October 5, 2015 at 4:31 pm #513902
Elliott
Inactive Moderator
Hi richardelectrix!

Add this to your custom CSS.
```
p.lost_password {
    position: relative;
    bottom: 30px;
    left: 130px;
}
```
Best regards,
Elliott
October 5, 2015 at 4:44 pm #513919

richardelectrix
Participant

Hi

That almost works however the alignment of the Remember Me and Forgot Password is slightly out.

http://screencast.com/t/nSPhtEoqh

Also, on a mobile it looks very messy.

http://screencast.com/t/DvLN0YLyyJ

October 6, 2015 at 12:38 pm #514337
Andy
Inactive Moderator
Hey!

use this code to adjust “Lost password” on desktop:
```
p.lost_password {
bottom: 33px;
}
```
For mobile use this:
```
@media only screen and (max-width: 767px) {
p.lost_password {
bottom: 3px;
left: 6px;
}}
```
and adjust as needed.

Best regards,
Andy
October 6, 2015 at 12:55 pm #514355

richardelectrix
Participant

Hi

That does move the Lost Password underneath the login button on a mobile, but Remember me doesnt move anywhere, it just wraps.

Also on a desktop, there is still an alignment issue with Lost Password vs Remember Me.

http://screencast.com/t/m9OeKuiN8c

October 6, 2015 at 1:02 pm #514359
Andy
Inactive Moderator
Also on a desktop, there is still an alignment issue with Lost Password vs Remember Me.

As I already told you, you can control lost password with this code:
```
p.lost_password {
bottom: 33px;
}
```
Just adjust as needed.

Where do you want “Remember me” to move? Use this code to control it’s position on mobile:
```
@media only screen and (max-width: 767px) {
label.inline {
position: relative;
bottom: 10px;
left: 10px;
}}
```
Cheers!
Andy
October 6, 2015 at 2:27 pm #514378
richardelectrix
Participant
Hi

I now have it working.

However on a mobile portrait it looks correct …
http://screencast.com/t/9muvjU3vXW

But on a mobile landscape it doesnt look correct …
http://screencast.com/t/DlEcGtrC9zk

The Lost password text should be underneath the login button as per portrait mobile.
```
@media only screen and (max-width: 767px) { 
p.lost_password {
bottom: -5px;
left: 0px;
}}
```
October 6, 2015 at 4:22 pm #514519

Andy
Inactive Moderator

Hi!

use different media queries for landscape mode. Check out this link for more information about it on different devices: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Best regards,
Andy

October 20, 2015 at 10:44 am #521475

richardelectrix
Participant

thanks

October 20, 2015 at 12:17 pm #521531

Andy
Inactive Moderator

glad we could help.

Cheers!
Andy
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘My Account Login Page (WooCommerce)’ is closed to new replies.