Shopify themes, liquid, logos, and UX
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:
And here's how I want it to be (the size I set here is 3.75rem)
And here is the second header:
And this is how I want it to be (the size I set here is 1.72rem):
Both of these headers are located on the homepage.
Here's my store URL: https://trivlen.com/
Solved! Go to the solution
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
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>
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
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
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?
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>
Thank you, this one works perfectly on both mobile and desktop
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024