DAWN: Changing the text box on a product page

Store Design
1

Screenshot_20220427-064156_Chrome.jpg
Screenshot_20220427-064156_Chrome.jpg1440×3200 214 KB

web page: jamberleboutique.com

Password: Amberle

I am trying to get the text input boxes to be more like the ones pictured bellow. & for the label to appear above the box instead of to the left of it.

SmartSelect_20220427-064404_Chrome.jpg
SmartSelect_20220427-064404_Chrome.jpg1440×1614 136 KB

1 Like
2

@JordanAmber

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

1 Like
3

I provided it & the password in the post.

1 Like
4

@JordanAmber

oh sorry i have missing out

can you please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
p.line-item-property__field {display: flex;align-items: center;}
p.line-item-property__field input {min-height: 50px;border-radius: 0;border: 1px solid #464646;}
.line-item-property__field label {flex: 1;}
5 
p.line-item-property__field {display: flex;align-items: center;}
p.line-item-property__field input {min-height: 50px;border-radius: 0;border: 1px solid #464646;}
.line-item-property__field label {flex: 1;}

Screenshot_20220427-080234_Chrome.jpg
Screenshot_20220427-080234_Chrome.jpg1440×2922 190 KB

Thank you! Can it also be changed like this? Moving the boxes to below the text?

1 Like
6

@JordanAmber

yes, please add this code

p.line-item-property__field {flex-wrap: wrap;}
.line-item-property__field label {
    flex: 100%;
}
7

Screenshot_20220427-081646_Chrome.jpg
Screenshot_20220427-081646_Chrome.jpg1440×3200 157 KB

Amazing! Thank you! One last thing. How do I change the inner text size to be more fitting to the box size?

1 Like
8

Hi @JordanAmber ,

I am Ani From https://www.task4store.com/ - Shopify Small & Custom Tasks Experts ( By MS Web Designer - Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore )

Try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste the below code at the bottom of the file.
p.line-item-property__field input {
    font-size: 16px;
}

MS_WEB_DESIGNER_0-1651066777643.png
MS_WEB_DESIGNER_0-1651066777643.png370×333 3.16 KB

If you have any concerns feel free to ask me!

Regards,
Ani

9

@JordanAmber

yes, sure added this code

p.line-item-property__field input {padding: 0px 15px;}
.line-item-property__field label {margin-bottom: 5px;}