Solved

login border focus not the same with border field

sweetchin23
Excursionist
43 0 6

hello, i have a problem on my lof-in page, the border when in focus is not the same length as my border field, how can fix it? it looks like this. Thanks in advance

 

Screen Shot 2023-11-21 at 9.58.49 AM.png

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
6910 1303 1331

This is an accepted solution.

Please update code 

.customer .field { padding-left: 0px !important; }
.customer .field input:focus~label { left: 5px !important; }
.customer .field label { padding-left: 16px !important; }

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 8 (8)

Dan-From-Ryviu
Shopify Partner
6910 1303 1331

Hi @sweetchin23 

Could you share your store link please?

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

sweetchin23
Excursionist
43 0 6

here

Dan-From-Ryviu
Shopify Partner
6910 1303 1331

To solve the issue, please add this code at the bottom of your base.css file.

.customer .field { padding-left: 0px !Important; }
.customer .field input:focus~label { left: 5px !important; }

 

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

sweetchin23
Excursionist
43 0 6

Thank you! But now it looks like this, I would like to have a space between the border and text.

 

Screen Shot 2023-11-21 at 10.22.48 AM.png

sweetchin23
Excursionist
43 0 6

oh, I edited it now. Thank you so much

Dan-From-Ryviu
Shopify Partner
6910 1303 1331

This is an accepted solution.

Please update code 

.customer .field { padding-left: 0px !important; }
.customer .field input:focus~label { left: 5px !important; }
.customer .field label { padding-left: 16px !important; }

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

sweetchin23
Excursionist
43 0 6

thank you

Dan-From-Ryviu
Shopify Partner
6910 1303 1331

Happy I could help

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now