FROM CACHE - de_header
Gelöst

Header

Hyo
Besucher
2 0 0

Hello everbody,

 

I have one simple question. As you can see below the title of the mobile version is too big.

Can you please explain me, how to decrease the font size of the title?

 

Hyo_0-1695655930831.png

 

Thank you, 

Hyo

1 AKZEPTIERTE LÖSUNG

Gabe
Shopify Staff
16733 2641 3918

Erfolg.

Hey @Hyo 

 

Thanks for the screenshot and you have reached the German community here but we can chat in English too, that's no problem! 😉

The easy way

So the issue here is that your shop name is being used as the logo and as the shop name is seoul.berlin it is a bit long and doesn't fit into the limited pixel width of your header bar on mobile w/o a line break. So in this case, what you can do is go into your theme editor and change the following settings and it should show w/o a line break:

 

 

You could also make an image showing your shop name the same way as in your screenshot above, but the logo Image needs to have a transparent background, which you can easily create with a free online tool like Adobe Express. Then upload your logo as an Image to the header in your theme editor. That way you have more control over the size or your branding logo.

 

Do it DIY?

If all that is not to your satisfaction, you will need to change the title size in the liquid and css, but this can get messy and it's not garanteed it will work depending on how your theme code is structured.

 

Also the fact that code changes can exclude your theme from future theme updates. But see a thread on this topic here where you may be able to use the CSS Editor within the theme editor:

 

 

Simply add the code to the CSS editor and see if it works. Hope that helps! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

3 ANTWORTEN 3

Gabe
Shopify Staff
16733 2641 3918

Erfolg.

Hey @Hyo 

 

Thanks for the screenshot and you have reached the German community here but we can chat in English too, that's no problem! 😉

The easy way

So the issue here is that your shop name is being used as the logo and as the shop name is seoul.berlin it is a bit long and doesn't fit into the limited pixel width of your header bar on mobile w/o a line break. So in this case, what you can do is go into your theme editor and change the following settings and it should show w/o a line break:

 

 

You could also make an image showing your shop name the same way as in your screenshot above, but the logo Image needs to have a transparent background, which you can easily create with a free online tool like Adobe Express. Then upload your logo as an Image to the header in your theme editor. That way you have more control over the size or your branding logo.

 

Do it DIY?

If all that is not to your satisfaction, you will need to change the title size in the liquid and css, but this can get messy and it's not garanteed it will work depending on how your theme code is structured.

 

Also the fact that code changes can exclude your theme from future theme updates. But see a thread on this topic here where you may be able to use the CSS Editor within the theme editor:

 

 

Simply add the code to the CSS editor and see if it works. Hope that helps! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Hyo
Besucher
2 0 0

Hello Gabe,

 

thank for the quick answer. It helped. I could finally decrease the font size of the header.

 

Hyo_0-1695724739614.png

 

Thank you!! 

 

Hyo

Gabe
Shopify Staff
16733 2641 3918

giphy

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog