Reduce Custom liquid size of text for mobile

[kamm0]

Hello Every One, 

I have added a h1 tag through custom liquid in my Dawn Theme 10.0. But I want to reduce its size so it can be best fit in one line in mobile view. Can someone Help me in this plz

householdpoint.pk my website link

I have also attached screenshot for better understanding

[BaileyPaserk · Accepted solution]

I would add a second class name just so things so this code does not affect anything else, but change class="center" to class="center mobile-small" 

Then at the bottom of your liquid, you could add this

<style>
@media screen and (max-width: 515px) {
  .mobile-small h1 {
    font-size:12px !important;
  }
}
</style>


ALTERNATIVE WAY
<style>
@media screen and (max-width: 515px) {
  .mobile-small h1 {
    font-size: calc(var(--font-heading-scale) * 1.5rem) !important;
  }
}
</style>

The "!important" part may not be necessary but depending on your theme code, if it does not work without it sometimes just adding that could fix it. 

This code says apply this font-size code unless the screen is over 515px. I do not know what size you want it to apply to but I just checked and around 515px is when the 2 h1 lines turn into 3 lines so I just placed that there. 

Also instead of just using "px" your theme uses this by default:
calc(var(--font-heading-scale) * 3rem) which is a bit more dynamic and changes based on the rest of your font size settings. So instead of setting to "15px", you can use:
"calc(var(--font-heading-scale) * 1.5rem)"

[kamm0]

many many thanks, It has worked