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

Store Design
, , , ,

Topic summary

A Shopify store owner using the Trade theme seeks to adjust mobile product pricing display: reducing the gap between regular and sale prices, and repositioning the sale price to the left.

Two CSS solutions provided:

Solution 1 (BSS-TekLabs):

  • Navigate to theme code editor
  • Locate and open base.css file
  • Add custom CSS targeting mobile screens (max-width: 749px)
  • Applies margin-right: 1px !important to .price.price--on-sale .price-item--regular

Solution 2 (niraj_patel):

  • Access theme.liquid file in theme editor
  • Insert CSS code before closing </body> tag
  • Targets mobile screens (max-width: 767px)
  • Adjusts margin-top for card information elements

Status: Multiple working solutions offered; awaiting original poster’s confirmation of which approach resolved the issue. Both contributors requested marking their response as the accepted solution if helpful.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

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
Bildschirmfoto 2024-07-14 um 3.30.31 PM.png677×459 105 KB

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

step.png
step.png1865×854 125 KB

  • 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
BSSTekLabs_0-1720966329116.png369×696 95.3 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
3

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 on theme.liquid

@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; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like