How to center Sale Pricing on mobile - Debut Theme

Solved
Highlighted
New Member
5 0 0

Does anyone know how to center the pricing?

This is what it currently looks like in mobile.

 

Screenshot_15.png

0 Likes
Highlighted
Explorer
78 19 19

Have you got a link to the site?

I'll need to be

text-align: center;

somewhere.

0 Likes
New Member
5 0 0
0 Likes
Highlighted
Shopify Partner
1079 171 198

This is an accepted solution.

@NLD add the following to your theme.scss file:

.price__sale {
    text-align: center;
    display: block!important;
}


That should do it, let me know if it works.

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
New Member
5 0 0

it worked! thanks so much!

is there anyway to have the prices displayed side by side? rather than on top of each other.

0 Likes
Highlighted
Shopify Partner
1079 171 198

Yes replace the code above with this piece of code:

.price__sale {
    text-align: center;
    margin: auto;
}
- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
New Member
5 0 0

oh it looks like if i use margin: auto, it isn't centered on mobile

not to worry, i will use the original solution.

 

0 Likes
Highlighted
Explorer
78 19 19

Hi NLD

It looks like the previous display:block is the one causing that issue.

 

.price--on-sale .price__sale {
    flex-wrap: nowrap;
}
.price__sale {
    text-align: center;
}

 

If you remove all the above CSS and go just with this it should work.

Thanks
Sam

0 Likes