How to adjust product name and price font size on mobile?

Store Design

Topic summary

Goal: On the Shopify Spotlight theme, make product name and price appear the same size on collection pages for mobile.

What changed: A CSS-only fix was provided to adjust the price font size on small screens (mobile). Earlier, contributors asked for the store URL/password to inspect, but a direct solution followed.

How to apply:

  • In Online Store > Themes > Actions > Edit code, open Assets > base.css/style.css/theme.css.
  • Add a mobile media query targeting max-width: 749px to set the price size, e.g.: #product-grid .price__regular .price-item { font-size: 14px !important; }
  • Save. A screenshot showed the updated, smaller price aligning visually with the product name.

Optional tweak: To hide the “Sold out” badge, add: span.badge.price__badge-sold-out.color-inverse { display: none; } and Save.

Notes:

  • The media query applies styles only on mobile/small screens.
  • Images in the thread illustrate the before/after results.

Outcome: A concrete CSS solution and an optional badge hide were provided. The issue appears resolved with no further open questions.

Summarized with AI on January 13. AI used: gpt-5.
1

hello everyone,

can someone help me out. I like to have the product name and price in the same font size on the collections page (mobile only)

Bildschirmfoto 2023-11-13 um 16.35.31.png
Bildschirmfoto 2023-11-13 um 16.35.31.png376Ă—462 4.11 KB

thanks in advance

using spotlight template

1 Like
2

hi @RobArt98

Would you mind to share your Store URL website? with password if its unpublish. You can PM I can keep it in secret. Thanks!

3

Hi @RobArt98 ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

4

Thanks for the info, check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
#product-grid .price__regular .price-item {
    font-size: 14px !important;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

Check this one.

Same Instruction.

span.badge.price__badge-sold-out.color-inverse {
    display: none;
}

And Save.

Result:

Made4uoRibe_0-1700068623180.png
Made4uoRibe_0-1700068623180.png532Ă—214 1.51 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!