Debut Theme, Shop Name Spacing/ Sizing Issue

[geeza1]

This is the shop name on mobile, I want WABISABI on the upper line and MART under it. Can anyone help please? Thanks

[JHKCreate · Accepted solution]

Hi @geeza1 

Your header is very narrow in terms of spacing, you would need to ideally remove one element or reduce the size of the logo immensely using this code:

@media only screen and (max-width: 749px)
{
#shopify-section-header > div:nth-child(3) > header > div > div.grid__item.medium-up--one-quarter.logo-align--left > h1 > a {
    font-size: 12px;
}
}

Should that help answer your query, we always appreciate liking & marking an as answer to let the community find quality solutions faster. Thanks!

[Zworthkey]

@geeza1 

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.

[geeza1]

Many thanks for your help

https://www.lostjapanstore.com/

password protected with "lost2506"

[dmwwebartisan]

@geeza1 

Please share your store URL!

Thanks!

[infoatcodelab7]

@geeza1 

Please share your site URL,
I will check out the issue and provide you a solution here.

[JHKCreate · Accepted solution]

Hi @geeza1 

Your header is very narrow in terms of spacing, you would need to ideally remove one element or reduce the size of the logo immensely using this code:

@media only screen and (max-width: 749px)
{
#shopify-section-header > div:nth-child(3) > header > div > div.grid__item.medium-up--one-quarter.logo-align--left > h1 > a {
    font-size: 12px;
}
}

Should that help answer your query, we always appreciate liking & marking an as answer to let the community find quality solutions faster. Thanks!

[geeza1]

HI many thanks, I wondering if I can hide the search element it might help. Can I do this with code?

thanks for your help

[JHKCreate]

Yes possible, use the following code at the end of your theme.css file:

@media only screen and (max-width: 749px)
{
button.btn--link.site-header__icon.site-header__search-toggle.js-drawer-open-top {
    display: none;
}
}

Let me know if that works instead!

[Zworthkey · Accepted solution]

svg.icon.icon-search {
    display: none !important;
}

@geeza1 
Add this code in the Theme.scss or theme.css

[geeza1]

Where do i put this code?

thansk