Reduce the size of the title in mobile view for landing page

Store Design
, , ,

Topic summary

A Shopify store owner wants to reduce the product title font size specifically for mobile view on product landing pages, with the change applied across all products.

Two CSS solutions were provided:

  1. PageFly-Richard’s approach:

    • Navigate to Online Store → Theme → Edit code
    • Open the base.css file
    • Add a media query targeting screens up to 767px width
    • Set .product__title h1 font-size to 20px with !important

  2. irene-vintage’s method:

    • Access the product landing page section file via Edit code
    • Locate the product title markup (typically {{ product.title }})
    • Add CSS media queries below existing code to target mobile devices
    • Adjust the max-width value as needed for different screen sizes

Both solutions use CSS media queries to apply mobile-specific styling. The store owner provided a password (“chawff”) for page access and included a screenshot showing the current title size.

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

Page Pass: chawff

I want the title font size to decrease only in mobile view, only in the product landing page.

For example make this title smaller and to be implemented for all products:

Andy106_1-1682644445759.png
Andy106_1-1682644445759.png403×802 171 KB

Thanks in advance.

2

Hi @Andy106

This is Richard from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media screen and (max-width: 767px){

.product__title h1 {

font-size: 20px !important;

}}

Hope that my solution works for you.

Best regards,

Richard | PageFly

3

Hello @Andy106 ,

Here’s a general guide you can try:

  • Go to Online Store → Themes → Actions → Edit code
  • Go to Sections and then open the file for your product landing page
  • Find the code for the product title. It should look something like this:
# {{ product.title }}
  • To reduce the size of the title on mobile view only, you will need to use CSS media queries to target the title at a specific screen width. Add the following code below the existing code:

In this example, we’re using a max-width of 767 pixels to target mobile devices. You can adjust this value to target a different screen size if needed

  • Save and preview

Hope this can help. Let us know if you need any further support.

Ali Reviews team