How can I center align a custom text area in the cart?

Technical Q&A
1

Hello,

i’d like to align in the center the follwing custom text area added into the cart:

Cattura32123.JPG
Cattura32123.JPG702×553 33.5 KB

It is a theme not online, so it’s useless to share the url.

Any help? Thanks in advance to all

2

Hi,

@Annavittoria simply add class CSS so you can align centre. and give it property

" align-items: center; "

to class

cart-attribute__field

like

.cart-attribute__field{

 align-items: center; 
}

please add this at the bottom of theme.scss.liquid

3

Hello @Ecommpremium , thanks for your reply.

I’ve added

.cart-attribute__field{

align-items: center;
}

into theme.css

but doesn’t work, nothing changed! Any additional idea?

4

@Annavittoria can you provide store URL so i can check?

5

@Ecommpremium i’ve temporarely published the theme for you to check

www.pianodgirls.com

6

Apply this and adjust padding pixel 120px accordingly!

.cat_attribute__field {

padding-left: 120px;
}

his

7

@Ecommpremium

i’ve corrected your mistyping into

.cart_attribute__field {

padding-left: 120px;
}

but doesn’t work.

Don’t know if i have to keep the previous one, but either with or without the previous

.cart-attribute__field{

align-items: center;
}

still doesn’t work

8
9

@Ecommpremium sorry but still doesn’t work as well :disappointed_face:

10

@Annavittoria , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
.cart-attribute__field{
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
}

.cart-attribute__field textarea{
    width: 100%;
}

Kind regards,
Diego

1 Like