How to change font size for image text title on mobile phones

[Allen6224]

Hi,

I'm trying to figure how to modify the code below to not change the original font size for the image text "The Buyer's Handbook". The code does what i want but it changes the font size for image text title. See font size title before and after.


Code:

<style>
@media screen and (max-width: 767px) {
/* Adjusts the font size for all H2 elements with class 'collection-list-title' */
h2.collection-list-title {
font-size: 24px !important;
}

/* Adjust font size for other potential collection titles */
.collection-title, .collection-heading,h2, .collection-list h2 {
font-size: 24px !important; /* Adjust font size for all potential selectors */
}
}
</style>

Original Font Size:

Title After Code:

[Tech_Coding · Accepted solution]

Hello @Allen6224 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
    h2.image-with-text__heading.h1 {
        font-size: 23px !important;
    }
    .image-with-text__content {
       padding: 2rem !important;
    }
}
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Tech_Coding · Accepted solution]

Hello @Allen6224 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
    h2.image-with-text__heading.h1 {
        font-size: 23px !important;
    }
    .image-with-text__content {
       padding: 2rem !important;
    }
}
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Made4uo-Ribe · Accepted solution]

Hi @Allen6224 

Check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 749px){
.image-with-text__content.image-with-text__content--adapt h2 {
    font-size: 30px !important;
}
}

And Save. 

Result:

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