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

[Annavittoria]

Hello,

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

<!-- **START** CUSTOM FIELD IN CART -->
  		<p></p>
  		<p></p>
  		<p class="cart-attribute__field">
  		<label for="aggiungi-un-messaggio-d'auguri-gratuito" style="text-decoration: underline; font-weight: bold; font-style: italic; float: center" >Aggiungi un messaggio d'auguri alla spedizione (gratuito)</label>
  		<textarea   id="aggiungi-un-messaggio-d'auguri-gratuito" 
                  	name="attributes[Aggiungi un messaggio d'auguri (gratuito)]" 
                  	placeholder="Scrivi qui..."
                  	style="font-size: 14px; background-color: #f7d4cf" >{{ cart.attributes["Aggiungi un messaggio d'auguri (gratuito)"] }}</textarea>
  		<p></p>
  		<p></p>
  		</p>
  		<!-- **END** CUSTOM FIELD IN CART -->

 

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

Any help? Thanks in advance to all

[Ecommpremium]

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

[Annavittoria]

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?

[Ecommpremium]

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

[Annavittoria]

@Ecommpremiumi've temporarely published the theme for you to check

www.pianodgirls.com

[Ecommpremium]

Apply this and adjust padding pixel 120px accordingly!

.cat_attribute__field {


padding-left: 120px;
}

 his 

[Annavittoria]

@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

[Ecommpremium]

<!-- **START** CUSTOM FIELD IN CART -->
  		<p></p>
  		<p></p>
  		<p class="cart-attribute__field" style= "align-items:center;">
  		<label for="aggiungi-un-messaggio-d'auguri-gratuito" style="text-decoration: underline; font-weight: bold; font-style: italic; float: center" >Aggiungi un messaggio d'auguri alla spedizione (gratuito)</label>
  		<textarea   id="aggiungi-un-messaggio-d'auguri-gratuito" 
                  	name="attributes[Aggiungi un messaggio d'auguri (gratuito)]" 
                  	placeholder="Scrivi qui..."
                  	style="font-size: 14px; background-color: #f7d4cf" >{{ cart.attributes["Aggiungi un messaggio d'auguri (gratuito)"] }}</textarea>
  		<p></p>
  		<p></p>
  		</p>
  		<!-- **END** CUSTOM FIELD IN CART -->

[Annavittoria]

@Ecommpremium  sorry but still doesn't work as well 😞

[diego_ezfy · Accepted solution]

@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