Align custom button to other fields on product page

Solved
Highlighted
Tourist
10 0 1

Hi,

I am selling custom name necklaces. I have successfully added the field where the customer can add his name. But unfortunately it is not aligned to the other fields. Can somebody help me how I can align them correctly.

Product page is: https://vulvery.de/products/personaliserte-namen-kette

 

0 Likes
Highlighted

Success.

Shopify Expert
665 170 201

Hi, @JonasE ,

This is Evita from On The Map.

 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

.line-item-property__field {
    margin-bottom: 10px;
}

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Highlighted
Tourist
10 0 1

@OTM 

Thanks alot, now it works for the desktop! But when I look at the mobile, it still sticks out to the left a bit. Can you help me with that to, that would be awesome! I will attach a screenshot, so you can see exactly.

IMG_0E9467A86577-1.jpeg

0 Likes
Highlighted

Success.

Shopify Expert
665 170 201

Add this:

@media only screen and (max-width: 749px){
   .line-item-property__field {
    width: 100%;
    padding: 0px 6px;
  }
  .line-item-property__field input  {
    width: 100%;
  }
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Tourist
10 0 1

@OTM 

My man! Thank you very much! 

Is there a way I can contact you in future when I need further help? 

Thanks a lot!

0 Likes
Highlighted
Tourist
10 0 1

Hi @OTM 

sorry, one more question. Now when you look at the desktop version, it is now moved to the left.

What shall I do?

Product link:

https://vulvery.de/products/personaliserte-namen-kette

Thx in advance

0 Likes
Highlighted

Success.

Shopify Expert
665 170 201

Add this:

@media only screen and (min-width: 750px) {
 .line-item-property__field {
   margin-left: 5px;
 }
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Highlighted
Tourist
10 0 1

@OTM 

Yeah it works! 

Thanks, and all the best!

 

1 Like
Highlighted
Shopify Expert
665 170 201

You're welcome :)

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes