Reduce gap between prices on mobile and move sale price to the left?

Solved

Reduce gap between prices on mobile and move sale price to the left?

KimGottwald
Trailblazer
235 0 34

Hello,

 

I would like to make the changed displayed in the picture, can someone help me?


Thank you!

 

URL: https://suq5b8csct01fyzg-61270851797.shopifypreview.com/

 

Im using the Trade theme.

 

Bildschirmfoto 2024-07-14 um 3.30.31 PM.png

Accepted Solution (1)

BSS-TekLabs
Shopify Partner
2401 695 832

This is an accepted solution.

- Here is the solution for you @KimGottwald 
- Please follow these steps:

step.png

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

@media screen and (max-width: 749px) {
.price--on-sale .price-item--regular {
     margin-right: 1px !important;
}
}

- Here is the result you will achieve:

BSSTekLabs_0-1720966329116.png

 

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 2 (2)

BSS-TekLabs
Shopify Partner
2401 695 832

This is an accepted solution.

- Here is the solution for you @KimGottwald 
- Please follow these steps:

step.png

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

@media screen and (max-width: 749px) {
.price--on-sale .price-item--regular {
     margin-right: 1px !important;
}
}

- Here is the result you will achieve:

BSSTekLabs_0-1720966329116.png

 

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

niraj_patel
Shopify Partner
2391 516 515

Hello @KimGottwald 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
.card-information>*:not(.visually-hidden:first-child)+*:not(.rating):not(.card__information-volume-pricing-note) {
margin-top: 0 !important;
}
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com