Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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.
Solved! Go to the solution
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
I hope it helps.
Kind regards,
Diego
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>
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
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
I hope it helps.
Kind regards,
Diego
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?
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>
Hi, could I get your help with my site? The font size for the heading is too big for the mobile view.
Hi, I did this but it only changes it for home page. How can I change it for every page?
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?
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024