How can I fit my entire store name onto one line on mobile?

[Derek_Keller]

Hello,

The previous response from over a year ago did not work for me. On Mobile, my store title is on two lines, not one. How do I fit my entire store name into one line? Which file should I adjust the code in?

Store Link: https://derekkellerstore.com/

[PaulNewton]

The previous response from over a year ago did not work for me

---

What previous response? when having issues even if it seems irrelevant it's import to provide context like reference urls.

On Mobile, my store title is on two lines, not one. How do I fit my entire store name into one line

---

For that site the site title only wraps to 2 lines on screen sizes under 320px.

And becomes 4 lines on screen sizes under 200px

, etc etc

Don't fixate on this type of design edge case too much, It's a losing battle too try to cram more into less. Especially if you have no data showing what device sizes customers are using.

 And then it's either going to clip or your gonna have to shift everything else around in the page.

This is why you'll see sites swap the site text to an icon/logo at smaller sizes.

Check your theme settings first for that feature.

Otherwise there are discussions on the forums about this technique for various themes that don't already have that feature.

Or try to use CSS grid to put the title ontop/under the other header elements like the following: 

@media screen and (max-width: 990px) {
    .header--top-center {
        grid-template-areas:
            "heading heading heading"
            "navigation icons icons"
;
    }
    .header--top-center .header__heading {
        width: 100%;
        white-space: nowrap;
    }
}

swap the "heading heading heading" line with "navigation icons icon" to put the title under the icons.

If you must figure out dynamic font sizes you'll want to look at media queries for mobile, css calc function, and the vw unit

https://css-tricks.com/simplified-fluid-typography/  

Good Hunting.

[LitExtension · Accepted solution]

Hi @Derek_Keller,

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (max-width: 989px) {
	.header__icon, .header__icon--cart .icon {
		height: 4.4rem;
		width: 3.4rem;
	}
	.header__heading-link .h2 {
		font-size: 2.4rem;
	}
}

Hope it helps!

[Derek_Keller]

Hi @LitExtension,

This solution no longer works for me. Can you check my website one more time and see if we can work on a solution? Here's the link if you need it: https://derekkellerstore.com/

[LitExtension]

Hi @Derek_Keller,

I checked and your base.css file is currently corrupted, can you send me a screenshot at this location of the file? I will check it.

Because I tried to test the code and everything works fine

[Derek_Keller]

Hi LitExtension,

Thanks again for helping me out. Here's the pastebin for my base.css file for my Shopify store:

https://pastebin.com/duJutJJU

[LitExtension]

Hi @Derek_Keller,

Please add code here:

it will work fine

[Derek_Keller]

Hi @LitExtension , 

The "}" you asked me to add to the code did not work for me. . . is there anything else I can try to fix this issue? Also, I want to double check to make sure we're on the same page: The problem is mobile-specific, everything is peachy on desktop. 

[LitExtension]

Hi @Derek_Keller,

I checked and it works, have you checked it again?

[Viileeu72]

@media screen and (max-width: 989px) {
.header__icon, .header__icon--cart .icon {
height: 4.4rem;
width: 3.4rem;
}
.header__heading-link .h2 {
font-size: 2.4rem;
}
}