login border focus not the same with border field

Solved
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
5580 1025 1055

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 and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

View solution in original post

Replies 8 (8)
Dan-From-Ryviu
Shopify Partner
5580 1025 1055

Hi @sweetchin23 

Could you share your store link please?

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

sweetchin23
Excursionist
43 0 6

here

Dan-From-Ryviu
Shopify Partner
5580 1025 1055

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 and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. 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
5580 1025 1055

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 and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

sweetchin23
Excursionist
43 0 6

thank you

Dan-From-Ryviu
Shopify Partner
5580 1025 1055

Happy I could help

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now