Solved

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

BSGYM77
Tourist
9 0 2

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.

 

 IMG_5934.jpg

Accepted Solutions (2)

diego_ezfy
Shopify Partner
2967 571 899

This is an 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

 

diego_ezfy_0-1658189217784.png

 



I hope it helps.

Kind regards,
Diego

 

View solution in original post

diego_ezfy
Shopify Partner
2967 571 899

This is an 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>

View solution in original post

Replies 8 (8)

diego_ezfy
Shopify Partner
2967 571 899

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
Tourist
9 0 2

BSGYM77
Tourist
9 0 2

diego_ezfy
Shopify Partner
2967 571 899

This is an 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

 

diego_ezfy_0-1658189217784.png

 



I hope it helps.

Kind regards,
Diego

 

BSGYM77
Tourist
9 0 2

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
Shopify Partner
2967 571 899

This is an 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
Excursionist
20 0 4

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

BSGYM77
Tourist
9 0 2

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?