How do I reduce the size of the Shop name in the mobile phone view

Solved
Craftbierbox
Tourist
11 1 0

Hi,

I'm just starting building a shop and noticed on the shops mobile view that the shop name is to large and is returned and therefore appears over two lines.

So this is it originally appeared

craftbierbox

.com

or on another phone, due to a different resolution

craftbier

box.com

I have deleted the .com from the shop name, however this does not slve the issue as there are now  users with

craftbier

box

is there a way to reduce the size of the shop name on the mobile view.

Any help would be gratly appreciated

Thanks

Neil

IMG_4995.PNG

 

 

Accepted Solutions (2)

Accepted Solutions
Craftbierbox
Tourist
11 1 0

This is an accepted solution.

Hi Drakedev,

 

thanks for the sugggestion and help, although I didn't have any success.

I searched for all .css files however only found these 3

 

critical.min.css

gift-card.min.css

theme.min.css

I entered the code you provided at the end of the 1st and 3rd files, unfortunately nothing changed

I'm sure I've misunderstood your intentions. So any other tips would be greatly appreciated

 

Thanks

 

View solution in original post

drakedev
Shopify Partner
598 128 163

This is an accepted solution.

Hi Neil, happy that worked

• If my answer helped click Like to say thanks
• If the problem is solved remember to click ✅ Accept Solution
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.

View solution in original post

Replies 7 (7)
drakedev
Shopify Partner
598 128 163

That happen only for very small devices.

This CSS code at the end of your theme.css file should make the trick

 

@media screen and (max-width: 360px) {
    .header__logo--text {
        font-size: 18px;
    }
}

 

If 18px is not small enough try 17px

• If my answer helped click Like to say thanks
• If the problem is solved remember to click ✅ Accept Solution
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
Craftbierbox
Tourist
11 1 0

This is an accepted solution.

Hi Drakedev,

 

thanks for the sugggestion and help, although I didn't have any success.

I searched for all .css files however only found these 3

 

critical.min.css

gift-card.min.css

theme.min.css

I entered the code you provided at the end of the 1st and 3rd files, unfortunately nothing changed

I'm sure I've misunderstood your intentions. So any other tips would be greatly appreciated

 

Thanks

 

View solution in original post

drakedev
Shopify Partner
598 128 163

Hi,

at the end of theme.min.css it's ok.

In fact I am able to see your code and it is working working.

Did you try to clear the cache of your browser on mobile?

Which device brand/model are you using and which browser?

• If my answer helped click Like to say thanks
• If the problem is solved remember to click ✅ Accept Solution
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
Craftbierbox
Tourist
11 1 0

Hi Drakedev

 

that's good news. I followed your suggestions and cleared the cache.

The desktop and mobile devices are all IOS, Firefox and Safari browsers. I'll close this thread as solved.

Your help is really appreciated.

 

Cheers

Neil

 

 

 

drakedev
Shopify Partner
598 128 163

This is an accepted solution.

Hi Neil, happy that worked

• If my answer helped click Like to say thanks
• If the problem is solved remember to click ✅ Accept Solution
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.

View solution in original post

marionsagon
New Member
1 0 0

Hey, I am having the same issue and I am happy to see there is a solution! 

On my side, I only access to:

- theme.liquid

theme.scss.liquid

theme.js

I tried at the end of theme.liquid and it did not work.

Would you be able to help?

drakedev
Shopify Partner
598 128 163

Try to insert that at the end of file theme.scss.liquid

• If my answer helped click Like to say thanks
• If the problem is solved remember to click ✅ Accept Solution
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.