What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Textarea center alignment

Solved

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

Annavittoria
Excursionist
37 0 17

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 -->

 

Cattura32123.JPG 

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

Any help? Thanks in advance to all

Accepted Solution (1)
diego_ezfy
Shopify Partner
2970 571 917

This is an 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

View solution in original post

Replies 9 (9)

Ecommpremium
Shopify Partner
512 43 93

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

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
Annavittoria
Excursionist
37 0 17

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
Shopify Partner
512 43 93

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

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
Annavittoria
Excursionist
37 0 17

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

www.pianodgirls.com

Ecommpremium
Shopify Partner
512 43 93

Apply this and adjust padding pixel 120px accordingly!

.cat_attribute__field {


padding-left: 120px;
}

 his 

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
Annavittoria
Excursionist
37 0 17

@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
Shopify Partner
512 43 93
<!-- **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 -->
- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
Annavittoria
Excursionist
37 0 17

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

diego_ezfy
Shopify Partner
2970 571 917

This is an 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