Re: I need some help adjusting the sizes of my 2 headers

Solved

I need some help adjusting the sizes of my 2 headers

Chicha7272
Explorer
50 1 7

Hey, I need to change the size of 2 of my headers, but I don't know how to do it. I tried changing everything myself but it didn't work out cause when I changed 1 the others were changing too. 

So here is the first header:

Chicha7272_1-1700283959820.png

 

And here's how I want it to be (the size I set here is 3.75rem)

Chicha7272_4-1700284266041.png


And here is the second header:

Chicha7272_5-1700284351006.png

And this is how I want it to be (the size I set here is 1.72rem):

Chicha7272_6-1700284492220.png

 

Both of these headers are located on the homepage.
Here's my store URL: https://trivlen.com/

Accepted Solutions (2)

theycallmemakka
Shopify Partner
1690 407 426

This is an accepted solution.

Hi @Chicha7272 ,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above </body> tag

<style>
.newsletter__wrapper.color-accent-1.gradient.content-container.isolate.content-container--full-width.section-template--20103583957316__e593337e-6900-4440-9ea4-abe00307be86-padding h2 {
    font-size: calc(var(--font-heading-scale) * 2.6rem);
}
@media only screen and (min-width: 750px){
    .newsletter__wrapper.color-accent-1.gradient.content-container.isolate.content-container--full-width.section-template--20103583957316__e593337e-6900-4440-9ea4-abe00307be86-padding h2 {
        font-size: calc(var(--font-heading-scale) * 3.4rem);
    }
    
    .section-template--20103583957316__2339a983-85e3-4cf5-96b3-99fe1bc40c93-padding h2.rich-text__heading.rte.inline-richtext.h2.scroll-trigger.animate--slide-in {
        font-size: calc(var(--font-heading-scale) * 2.8rem);
    }   
}

</style>

 

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

theycallmemakka
Shopify Partner
1690 407 426

This is an accepted solution.

Hi @Chicha7272 ,

 

Please replace previous code with this new code to target mobile and desktop. You can adjust the font size accordingly for mobile and desktop.

<style>
//FOR MOBILE
.newsletter__wrapper.color-accent-1.gradient.content-container.isolate.content-container--full-width.section-template--20103583957316__e593337e-6900-4440-9ea4-abe00307be86-padding h2 {
    font-size: calc(var(--font-heading-scale) * 2.6rem);
}
.section-template--20103583957316__2339a983-85e3-4cf5-96b3-99fe1bc40c93-padding h2.rich-text__heading.rte.inline-richtext.h2.scroll-trigger.animate--slide-in {
    font-size: calc(var(--font-heading-scale) * 2.4rem);
} 

//FOR DESKTOP
@media only screen and (min-width: 750px){
    .newsletter__wrapper.color-accent-1.gradient.content-container.isolate.content-container--full-width.section-template--20103583957316__e593337e-6900-4440-9ea4-abe00307be86-padding h2 {
        font-size: calc(var(--font-heading-scale) * 3.4rem);
    }
    
    .section-template--20103583957316__2339a983-85e3-4cf5-96b3-99fe1bc40c93-padding h2.rich-text__heading.rte.inline-richtext.h2.scroll-trigger.animate--slide-in {
        font-size: calc(var(--font-heading-scale) * 2.8rem);
    }   
}
</style>

 

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 5 (5)

theycallmemakka
Shopify Partner
1690 407 426

This is an accepted solution.

Hi @Chicha7272 ,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above </body> tag

<style>
.newsletter__wrapper.color-accent-1.gradient.content-container.isolate.content-container--full-width.section-template--20103583957316__e593337e-6900-4440-9ea4-abe00307be86-padding h2 {
    font-size: calc(var(--font-heading-scale) * 2.6rem);
}
@media only screen and (min-width: 750px){
    .newsletter__wrapper.color-accent-1.gradient.content-container.isolate.content-container--full-width.section-template--20103583957316__e593337e-6900-4440-9ea4-abe00307be86-padding h2 {
        font-size: calc(var(--font-heading-scale) * 3.4rem);
    }
    
    .section-template--20103583957316__2339a983-85e3-4cf5-96b3-99fe1bc40c93-padding h2.rich-text__heading.rte.inline-richtext.h2.scroll-trigger.animate--slide-in {
        font-size: calc(var(--font-heading-scale) * 2.8rem);
    }   
}

</style>

 

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Chicha7272
Explorer
50 1 7

Hey, I had to adjust the rem in these two parts:
font-size: calc(var(--font-heading-scale) * 3.4rem);
font-size: calc(var(--font-heading-scale) * 2.8rem);
But the code worked perfectly. Thanks man

Chicha7272
Explorer
50 1 7

Hey @theycallmemakka , just noticed something. The code you provided works well on desktop but for some reason doesn't work at all on mobile. I tried changing the sizes of both of these headers and even though everything looked good on PC, it didn't change anything on mobile. So is there a way to make the code you provided work on mobile too?

theycallmemakka
Shopify Partner
1690 407 426

This is an accepted solution.

Hi @Chicha7272 ,

 

Please replace previous code with this new code to target mobile and desktop. You can adjust the font size accordingly for mobile and desktop.

<style>
//FOR MOBILE
.newsletter__wrapper.color-accent-1.gradient.content-container.isolate.content-container--full-width.section-template--20103583957316__e593337e-6900-4440-9ea4-abe00307be86-padding h2 {
    font-size: calc(var(--font-heading-scale) * 2.6rem);
}
.section-template--20103583957316__2339a983-85e3-4cf5-96b3-99fe1bc40c93-padding h2.rich-text__heading.rte.inline-richtext.h2.scroll-trigger.animate--slide-in {
    font-size: calc(var(--font-heading-scale) * 2.4rem);
} 

//FOR DESKTOP
@media only screen and (min-width: 750px){
    .newsletter__wrapper.color-accent-1.gradient.content-container.isolate.content-container--full-width.section-template--20103583957316__e593337e-6900-4440-9ea4-abe00307be86-padding h2 {
        font-size: calc(var(--font-heading-scale) * 3.4rem);
    }
    
    .section-template--20103583957316__2339a983-85e3-4cf5-96b3-99fe1bc40c93-padding h2.rich-text__heading.rte.inline-richtext.h2.scroll-trigger.animate--slide-in {
        font-size: calc(var(--font-heading-scale) * 2.8rem);
    }   
}
</style>

 

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Chicha7272
Explorer
50 1 7

Thank you, this one works perfectly on both mobile and desktop