How can I resize my craft theme header for mobile view?

[47428martin]

Hi, Im using the craft theme, and my header is perfect size on desk top. But on mobile, its too big so the end letter hangs out below the rest of the header wording. How do I change the size so that its just one long header on mobile? forestfungusfairy.com

Thank you in andvance!

[AvadaCommerce · Accepted solution]

Hi @47428martin 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:

@media (max-width: 600px) {
.header-wrapper .header__heading {
    width: 200px !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[47428martin]

Worked like a charm, thank you so much! Accepted as solution

[kb422]

I have been searching for this information for hours.  All the info. I could find was for discontinued old themes mentioning a file that does not exist for newer themes that was called theme.scss...I was so tired of seeing this file mentioned that I was going crazy.

So this was right on point but for me I used your advice for making my mobile logo larger...it is a common complaint that has existed for several years.  Thank you so much for taking your time to explain.  Karma will go your way!   

[Zworthkey]

@kb422 

Welcome to the Shopify community!
Thanks for your good question.

Please share your store URL.
So that I will check and let you know the exact solution here.

[stoneandwillow]

This advise is super helpful, however, I noticed that this only applies it to the home page and not any other page. Did I miss a step or is there something else I need to do to make sure it applies to every page on the site? I would think it would apply site-wide because it is in the header.....?