How can I align product variant names to the left?

[thomasmrgn99]

Hi,

I have my variants centered on my product page, but I would like the actual variant names for size variant to be aligned to the left of the box. Is this possible?

Website is https://pawcopets.co.uk/calmingbed

Appreciate any help!

[oscprofessional]

@thomasmrgn99 
Hi,

.theiaStickySidebar .btn-atc.atc-slide.btn_full_true.PR_no_pick_false.btn_des_2.btn_txt_3 {
  text-align: left;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->custom.css.liquid

[thomasmrgn99]

@oscprofessional Hi unfortunately this moved the whole thing 😞

Is it possible to move only the 'Small' word (size variant text inside box)

Thanks

[oscprofessional]

@thomasmrgn99 ,

.header_picker.nt_name_current.truncate {
    text-align: left;
}

please use this code

[M-Usman · Accepted solution]

Hi @thomasmrgn99,

.header_picker {
text-align: left;
}

Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->custom.css.liquid

[thomasmrgn99]

@M-Usman Thanks!

[thomasmrgn99]

@M-Usman How can I lower the gap between add to cart button and variant selector?

[oscprofessional]

@thomasmrgn99 ,

.mb__40 {
    margin: 0;
}

Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->custom.css.liquid

[M-Usman]

#callBackVariant_ppr #cart-form_ppr .mb__40 {
  margin-bottom: 20px;
}

try this code.

[thomasmrgn99]

@M-Usman Thanks so much

What about the spacing underneath the add to cart?

between the button and the line

[M-Usman]

This one?

[thomasmrgn99]

@M-Usman No sorry the space here

If it is possible to increase

Thanks

[M-Usman]

#callBackVariant_ppr {
  padding-bottom: 20px;
}