Make product title font smaller on mobile

Store Design

Topic summary

A user seeks help reducing product title font size on mobile devices to approximately 18px, noting that desktop adjustments worked but mobile remains unchanged.

Multiple solutions offered:

  • CSS media query approach (most common): Add custom CSS targeting screens with max-width 768px, setting .product__title font-size to 18px with !important flag

  • Implementation locations vary by responder:

    • Add code to theme.liquid file above </body> tag
    • Insert into base.bundle.css or base.css at file bottom
    • Use Theme Settings > Custom CSS section (via Shopify Customize interface)

Key technical details:

  • All solutions use @media screen and (max-width: 768px) to target mobile devices
  • The !important declaration ensures the style overrides existing rules
  • Responders included screenshots demonstrating code placement and expected results

Status: Multiple working solutions provided; awaiting user confirmation on which approach succeeded.

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

Hi! I’m trying to make my product title font smaller and managed to do it on desktop view, but for mobile, no matter what code I try, it still stays super big. Please help! I want to make the mobile view around 18px.

Thank you

www.wastd.world

Screenshot 2024-11-19 at 3.50.00 PM.png
Screenshot 2024-11-19 at 3.50.00 PM.png2832×670 89.5 KB

Screenshot 2024-11-19 at 3.50.07 PM.png
Screenshot 2024-11-19 at 3.50.07 PM.png754×1158 184 KB

2 Likes
2

Hey @letsgetwasted

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1732003016719.png
Moeed_0-1732003016719.png378×665 39.7 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hello @letsgetwasted

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.bundle.css and paste this at the bottom of the file:
@media screen and (max-width: 767px) {
.product__title>* {
font-size: 25px !important;
}
}

ZestardTech_0-1732004146441.png
ZestardTech_0-1732004146441.png1009×785 64.1 KB

4

Hi @letsgetwasted

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (max-width: 768px){
.product__title > h1 {
    font-size: 18px !important;
}
}

image (2).png
image (2).png1426×791 91.8 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

1 Like
5

Hello @letsgetwasted
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.product__title > * {
font-size: 18px !important;
}

result

11.png
11.png354×561 28.8 KB

If this was helpful, hit the like button and accept the solution.
Thanks

6

Hello,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before 
@media (max-width: 768px) { 
 	.example-class { font-size: 18px; } 
}

Thanks!