Make Page Title Smaller On Mobile

[umrraz90]

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

[Moeed]

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

[umrraz90]

Hi Moeed, 

Its theflowerstudiobyroo.com 

thank you 

[Moeed]

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 </body> tag

<style>
@media screen and (max-width: 767px) {
.page-title {
    font-size: 28px !important;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

[umrraz90]

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!)

[Moeed · Accepted solution]

Hey @umrraz90 

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

<style>
@media screen and (max-width: 767px) {
.page-title {
    font-size: 28px !important;
}
.image-with-text__heading {
    font-size: 18px !important;
}
}
</style>

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

Best Regards,
Moeed

[umrraz90]

Thank you so much!

[GTLOfficial]

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

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

[Made4uo-Ribe]

Hi @umrraz90 

Would you mind to share your store URL? Thanks!

[umrraz90]

Hi @Made4uo-Ribe 

Its theflowerstudiobyroo.com

Thanks you 

[Made4uo-Ribe]

Thanks for the info, check this one. 

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. 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;
}
}

• And Save. 
• Result:
• 

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