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

[Bajgor]

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

[rajweb]

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 </head> in your theme.liquid file:

<style>
@media screen and (max-width: 767px) {
.header__heading-link .h2 {
    font-size: 16px !important;
}
}
</style>

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

Best,

Rajat

[ Shopify Expert ]

[Moeed]

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 </body> tag

<style>
@media screen and (max-width: 767px) {
.header__heading-link .h2 {
    font-size: 16px !important;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

[The_ScriptFlow]

Hey @Bajgor,

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

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:

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

[ZestardTech]

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;
}
}

Let me know if you need further assistance!