Make Page Title Smaller On Mobile

Technical Q&A

Topic summary

Goal: Reduce mobile page title size so headings fit on one line.

Context: The store URL was shared (theflowerstudiobyroo.com). Images and code snippets were central to the guidance; some code blocks in the thread appear truncated/missing.

Proposed solutions:

  • Working fix confirmed: Add custom code via Online Store > Edit code > theme.liquid (above ). The OP confirmed this successfully reduced the main page title size on mobile.
  • Page/section-specific request: For the Wedding page title (“Life’s precious moments”), an updated snippet replaced the initial one to target that section specifically.
  • Alternative CSS approaches (no theme.liquid edits):
    • Add a mobile media query in base.css/main.css to reduce font-size for common title selectors (e.g., .page-title, h1/h2 variants) at max-width ~749px.
    • Use a targeted selector for Image-with-text section headings to set a smaller font-size (example given with !important to override theme styles).

Outcome: The OP reported success and expressed intent to mark a solution. The discussion appears resolved with CSS-based options for global and section-specific mobile title sizing.

Summarized with AI on December 23. AI used: gpt-5.
1

I would like to make page titles smaller on mobile so that it fits on one line, how do I do this?

Example below for Dried Wedding Flowers however I would like it done on every page where it doesnt sit on o

umrraz90_0-1722336989020.png
umrraz90_0-1722336989020.png308Ă—661 26.9 KB

1 Like
2

Hey @umrraz90

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hi Moeed,

Its theflowerstudiobyroo.com

thank you

4

Hi @umrraz90

Would you mind to share your store URL? Thanks!

5

Hi @Made4uo-Ribe

Its theflowerstudiobyroo.com

Thanks you

6

Hey @umrraz90

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-1722337816549.png
Moeed_0-1722337816549.png380Ă—674 38.5 KB

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

Best Regards,
Moeed

7

Legend! it works for the page title, how would i do the same for the title lifes precious moments on the wedding page? ( I will mark as solution!)

8

Hey @umrraz90

Remove the previous code, and add this updated code with the same steps.

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

Best Regards,
Moeed

1 Like
9

Hello @umrraz90

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

.image-with-text__content > :first-child:is(.image-with-text__heading),
{
font-size: 21px !important;
}

and the result will be

11.png
11.png399Ă—836 279 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks

10

Thanks for the info, check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
@media only screen and (max-width: 749px){
h2.h1, .page-title, h1.h0 {
    font-size: 25px;
}
}

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

11

Thank you so much!