How to align variant option to the left using Impulse theme

Solved
AllBlacks
Excursionist
40 0 9

I'd like my variant buttons to align to the left on mobile like they do on desktop, should be an easy fix but cant seem to figure it out, any help would be greatly appreciated

dmwwebartisan
Shopify Partner
6444 1497 1955

@AllBlacks 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
AllBlacks
Excursionist
40 0 9

Thank you

URL: https://trende-co.myshopify.com

password: tt

dmwwebartisan
Shopify Partner
6444 1497 1955

This is an accepted solution.

@AllBlacks 

Please add the following code at the bottom of your assets/theme.css file. Hope this helps.

@media only screen and (max-width: 768px){
.variant-input-wrap{ text-align: left !important; }
}

variant-tothe-left.jpg

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Natztech
Shopify Partner
851 230 630

This is an accepted solution.

@media only screen and (max-width: 429px){
.template-product .variant-input-wrap{

text-align: left !important;
}
}
Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
AllBlacks
Excursionist
40 0 9

Thank you! Life saver

0 Likes
AllBlacks
Excursionist
40 0 9

Appreciate you, thanks very much!

dmwwebartisan
Shopify Partner
6444 1497 1955

@AllBlacks 

To change the font of add to cart button. You need to add the following code.

.template-product button#AddToCart-6593918730310 {
    font-family: var(--typeHeaderPrimary),var(--typeHeaderFallback) !important;
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Natztech
Shopify Partner
851 230 630
.template-product  #AddToCart-6593918730310 {
    font-family: var(--typeHeaderPrimary),var(--typeHeaderFallback) !important;
}
Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
AllBlacks
Excursionist
40 0 9

Thanks @dmwwebartisan, it did change it slightly, but it still doesn't look like my normal body text