Price Font Size & Alignment Change for Collection Page on Mobile Only (Dawn 15.4)

Store Design
, ,
1

Hello everyone!

Could anyone please help me?
I’d like to place the sale price and compare-at price on the same row and in a smaller font size on the collection page (mobile version only).
Ideally, they should be justified or aligned to the left margin.

I’d really appreciate any help or suggestions, thank you in advance!

Original Art – DrawWithDi

Screenshot_20251015-163019
Screenshot_20251015-1630191008×2244 447 KB
Screenshot_20251015-163129
Screenshot_20251015-1631291008×2244 487 KB

2

Hi @DRAWandCARE ,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media screen and (max-width: 767px) {
  .price.price--on-sale .price__sale {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  .price.price--on-sale .price-item--regular {
    order: 1;
    font-size: 12px !important;
  }

  .price.price--on-sale .price-item--sale {
    order: 2;
    font-size: 12px !important;
  }

  .price.price--on-sale .price__container {
    display: flex;
    flex-direction: column;
  }

  .price.price--on-sale .price__regular {
    display: none;
  }
}

Thanks!

3

please add this css to the very end of your base.css file and check

shopify admin->online store->themes->edit theme code->assets->base.css

@media screen and (max-width:749px){
.price.price--on-sale .price__sale{flex-direction: row !important;}
.price.price--on-sale s.price-item.price-item--regular{font-size: 10px !important;}
.price.price--on-sale span.price-item.price-item--sale.price-item--last{font-size: 10px !important;}
}

image
image1366×768 283 KB

5

Hi! Thank you so much for the quick reply!
The code helped align the prices to the left edge, but they’re still arranged in a column, and the size doesn’t seem to have changed either. Please see the screenshot below.

image
image570×907 124 KB

Appreciate your help!

6

Hi @DRAWandCARE

Here is a CSS snippet you can try (targeting mobile screens only) to place the sale price and “compare‑at” price in the same row, left‑aligned, and reduce their font size.

  1. Go to your Shopify Admin.
  2. Navigate to:
    Online Store → Themes
  3. Open a file named something like:base.css or theme.css or theme.scss.liquid
  4. To the bottom of that file, and paste the corrected CSS code

@media screen and (max-width: 749px) {
/* Make sure the container uses flex to align items in a row */
.price.price–on-sale {
display: flex !important;
flex-direction: row !important;
align-items: baseline;
gap: 4px;
}

/* Compare-at (original) price */
.price.price–on-sale s.price-item.price-item–regular {
font-size: 10px !important;
color: #777;
text-decoration: line-through;
margin: 0;
}

/* Sale price */
.price.price–on-sale span.price-item.price-item–sale.price-item–last {
font-size: 10px !important;
color: #000;
font-weight: 600;
margin: 0;
}
}

Thank you.

Screenshot_10
Screenshot_10495×791 303 KB

7

@DRAWandCARE please remove above css and try this

@media screen and (max-width: 749px) {
.price.price--on-sale .price__sale{flex-direction: row !important;}
#MainContent .price.price--on-sale s.price-item.price-item--regular{font-size: 9px !important;}
#MainContent .price.price--on-sale span.price-item.price-item--sale.price-item--last {font-size: 9px !important;}
}

To build shopify pages use [PAGEFLY]

9

Hi, thank you so much for your help, it worked for me!

Could we align the price and compare-at price on opposite sides so they’re justified?
And could you also let me know how to reduce the product title size there?

Thanks a lot!!

5444973858298919156
5444973858298919156575×1280 143 KB

10

@DRAWandCARE try this css, I think font sizes are set via customize settings for collection page, please check that too

@media screen and (max-width: 749px) {
div#ProductGridContainer ul#product-grid h5 a{font-size: 12.5px !important;}
}