Shop Name Font in Header too Large for mobile

Highlighted

Our shop.name is our URL: WaterBottleShop.online

 

Looks great on desktop, but for mobile the one-word bleeds into 3 lines

www.waterbottleshop.online (mobile)www.waterbottleshop.online (mobile)

Can anyone help on changing the font size  to keep it to one line or at least keep it to two by putting a carriage return after "WATERBOTTLE"?

 

Thanks!

WaterBottleShop.Online
https://waterbottleshop.online
0 Likes
Highlighted
Shopify Partner
1275 103 159

Hi @shefsam1,

 

Hope you are doing well!

I came across your post and you can add the following code in theme.scss.css file.

 

@media scr@media screen and (max-width: 600px) {
.site-header__logo {

font-size: 14px;
}}

 

However, it is recommended to have the logo and not handwritten text. If you need any help in logo designing then please feel free to reach out. 

 

 

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted

Thanks!

 

I tried the code.  Put it at the end of the CSS - didn't work.  Corrupted the layout of the page.

 

I like the way the typed in one looks.  I've tried a similar logo .jpg graphic - it just didn't do it.

 

Anything else I might try?

WaterBottleShop.Online
https://waterbottleshop.online
0 Likes
Shopify Expert
2760 478 619

HI @shefsam1 

try to make font size small in mobile mini device:

Add this css in asset->theme.scss file at bottom

 @media only screen and (max-width: 320px) {.site-header__logo{ font-size: 12px;}}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted

I tried it...

Didn't crash the page - didn't seem to do anything

I changed the font-size in that code from 12 to 10... nothing either

Any thoughts?

WaterBottleShop.Online
https://waterbottleshop.online
0 Likes
Highlighted
Shopify Expert
2760 478 619

I can see its working, its already in 10px font now what you want.

because of your store name is big you cant set in one line 

logo.PNG

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Hasn't changed on my phone or on the Shopify mobile simulator
WaterBottleShop.Online
https://waterbottleshop.online
0 Likes
Highlighted

Strange.  Mine still doesn't show up like that.

WaterBottleShop.Online
https://waterbottleshop.online
0 Likes
Highlighted
Shopify Expert
2760 478 619

Hi @shefsam1 

I think you have added image logo instead of text and its looking ok now. Let me know if you have still any problem

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Yeah. I switched it out. Thank you for the help!
WaterBottleShop.Online
https://waterbottleshop.online
0 Likes