How can I fix the mobile header font size issue in Ride theme?

[BSGYM77]

Hello, 

Im using the ride theme and like it so far. One of my main challenges however, is the mobile site header. It seems to be too big and the words are stacking which is affecting the aesthetic (see picture). I've looked for coding help but have found nothing specifically for the Ride theme. Any help is appreciated.

 

[diego_ezfy · Accepted solution]

@BSGYM77,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>


.header__heading *{
    font-size: 13px !important;
}
</style>
<script>

</script>

This would be the best way to go by. If the text is too large it will either:

1. get too close to the hamburger menu and look off

2. break to the line below

I hope it helps.

Kind regards,
Diego

[diego_ezfy]

Hello @BSGYM77,

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

[BSGYM77]

https://bodysculptinggym.com

[BSGYM77]

https://bodysculptinggym.myshopify.com

Password: do

[diego_ezfy · Accepted solution]

@BSGYM77,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>


.header__heading *{
    font-size: 13px !important;
}
</style>
<script>

</script>

This would be the best way to go by. If the text is too large it will either:

1. get too close to the hamburger menu and look off

2. break to the line below

I hope it helps.

Kind regards,
Diego

[BSGYM77]

Hey Diego, this helped for the main page but I wanted to do this for the mobile site. I actually need it the same size on the page. Is this possible?

[diego_ezfy · Accepted solution]

@BSGYM77 

If you want it only for mobile, you can follow the aforementioned steps and you use the following code instead:

<style>


@media (max-width: 749px){
.header__heading *{
    font-size: 13px !important;
}
}
</style>
<script>

</script>

[Joi_Johnston]

Hi, could I get your help with my site? The font size for the heading is too big for the mobile view. 

[Andrej8]

Hi, I did this but it only changes it for home page. How can I change it for every page?

[BSGYM77]

I had another request regarding this code. The headline/header for the store reads "BODYSCULPTING" its supposed to e be two words ("BODY SCULPTING"). I haven't found a place to directly edit the words. how would I go about this?