Change the font size of the page name in the header.

Store Design
, , , ,

Topic summary

A user seeks help to prevent their store name “Stylishplaques” from wrapping onto multiple lines in the mobile header, while it displays correctly on desktop.

Problem: The site logo text breaks across lines on mobile devices, creating an undesirable stretched appearance.

Solutions Provided:
Multiple developers offered CSS code solutions with slight variations:

  • Initial approaches: Add custom CSS to theme.liquid file before the </head> tag to control text wrapping and font sizing
  • Refined solution: Insert CSS into base.css file targeting mobile screens (max-width: 767px) that:
    • Adjusts header grid template columns (1fr 2fr 1fr)
    • Reduces header padding
    • Decreases font size to ~15px
    • Modifies header icon spacing

Implementation: Navigate to Online Store > Themes > Edit Code, then locate either theme.liquid or base.css depending on the chosen approach.

Status: Multiple working solutions provided with visual proof of results. The issue appears resolved based on before/after screenshots shared by contributors.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Greetings to you. I would like to know if you have any way or code to make the caption “Stylishplaques” on the phone not stretch like this just be in one line. I thought about applying some code to change the size, but no attempt has succeeded. I’m asking for your help. It concerns changing the font size on the phone because on the computer it is fine. Thanks a lot in advance for your help. In the attachment shows what I mean.
Link to the store https://ddbfr9-vj.myshopify.com/
password: taycle

2 Likes
2

Hey @Bajgor ,

To ensure the caption “Stylishplaques” appears on one line and doesn’t stretch on mobile,

Steps to implement:

  1. online Store

  2. themes

  3. Edit Code > Theme.liquid

Add this right before in your theme.liquid file:

If you need help implementing or adjusting this, please feel free to reach out. Thanks!

Best,

Rajat

[ Shopify Expert ]

1 Like
3

Hey @Bajgor

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1751874956985.png
Moeed_0-1751874956985.png374×662 120 KB

If I managed to help then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
4

Hey @Bajgor ,

I can still see the issue with the alignment of the text. It doesn’t looking good.

The_ScriptFlow_0-1751881409905.png
The_ScriptFlow_0-1751881409905.png447×115 7.44 KB

In order to fix this you need to paste the following code in the end of base.css file.

@media only screen and (max-width: 767px) {
 .header {
  padding: 6px 1.5rem 6px 1.5rem !important;
}
 .header--mobile-left {
    grid-template-columns: 1fr 2fr 1fr !important;
  }
}

Results:

The_ScriptFlow_1-1751881513872.png
The_ScriptFlow_1-1751881513872.png432×112 5.33 KB

If you facing issue with finding the base.css file then you can follow these steps.

Go to Shopify Admin >> Online Store >> themes >> Edit Code >> base.css file.

If this was helpful mark as Solution, like it and Buy me a coffee.

Thanks

5

Hello @Bajgor ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
@media screen and (max-width:767px){
.header--mobile-left {
    grid-template-columns: 1fr 2fr 1fr !important;
}
.header {
    padding: 6px 1rem 6px 1rem !important;
}
.header__heading-link .h2 {
    font-size: 15px !important;
}
.header__icons {
    padding-right: 0;
}
}

ZestardTech_0-1751890483551.png
ZestardTech_0-1751890483551.png339×729 146 KB

Let me know if you need further assistance!