Help! Product button on mobile changes to left-aligned from centred when it is clicked

Site URL: https://www.karitonsorbetes.com/

Hey guys,

I seem to be having an issue with the product buttons on my MOBILE website. When I click on it, the button becomes left-aligned instead of centre. Any ideas on how to fix this?

See screenshot here:

https://share.getcloudapp.com/Kour1QDn

Website: karitonsorbetes.com   PW: Coron

Thanks,

Theresa

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.sqs-add-to-cart-button-wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
}
}

@tuanphan this worked! Thanks so much 🙂

I'm also having trouble with adjusting the line height of my h2 on image cards in Tablet view. It works fine for desktop and mobile but can't seem to figure out why the line height is larger than I've put in the coding and the button is also larger? Any ideas?

See screenshot here

https://share.getcloudapp.com/xQuLxG7E

Thanks,

Theresa

8 hours ago, Theresamo said:

I'm also having trouble with adjusting the line height of my h2 on image cards in Tablet view. It works fine for desktop and mobile but can't seem to figure out why the line height is larger than I've put in the coding and the button is also larger? Any ideas?

See screenshot here

https://share.getcloudapp.com/xQuLxG7E

Thanks,

Theresa

Can you share link to page in screenshot?

Hi @tuanphan it's https://www.karitonsorbetes.com/ PW: Coron

Thankyou

7 hours ago, Theresamo said:

Hi @tuanphan it's https://www.karitonsorbetes.com/ PW: Coron

Thankyou

I don't see this h2 text. Can you take a screenshot? https://share.getcloudapp.com/xQuLxG7E

It is an image card title, see attached.

Thankyou

Try adding to Home > Design > Custom CSS

@media screen and (max-width:900px) and (min-width:641px) {
.sqs-block-image .design-layout-card .image-title p {
    line-height: 20px !important;
}
}

Thanks!