Shopify Turbo Theme Header Size For Mobile

Store Design
1

Hi, I am using turbo theme for shopify and when I increase the size of my text in the header, it only increases on desktop view but not on mobile view. Can anyone assist me on this?

2

Hello,

Thank you for your question.

Please share your store URL, page URL and also password (if your store has one), I’ll help you out to the best of my ability.

Kind regards,
Diego

3

Hi, my landing page URL is https://towelholic.com/products/toweldress-1

Thanks for your assistance

4

By header you mean the text in the blue bar? If so, use this code:

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > styles.scss.liquid and paste this at the bottom of the file:
@media (max-width:767px){
    [id] .promo_banner * {
    font-size: 12px !important;
}
}

Let me know whether this is what you need.

5

By Header I meant the following:

hustlemuscle_1-1597646729644.png

hustlemuscle_2-1597646751715.png

These wordings that I set as heading 2 which increases in size on desktop view but not mobile. Any way to increase the size for mobile too?

Sorry for the miscommunication earlier

6

Oh, gotcha. Yes, you can repeat the previous steps and use this code instead:

@media (max-width:460px){
    .description h2{
    font-size: 35px !important;
}
}

Feel free to change the “35px” to any value you wish. It will only affect mobile devices.

Let me know how this goes for you.

1 Like
7

Thank! It worked superbly.

How about the title of my product? is there any way to enlarge the size on mobile too?

hustlemuscle_0-1597647670071.png

8

You’re welcome!

Yes, just use this one:

@media (max-width:767px){
.product .product_name{
font-size: 35px !important;
}
}

Please make sure to click on the button “accept as solution” and “Like” below my answer to help other people in the community.

Kind regards,
Diego

1 Like
9

Thanks for the information. Is there a way to increase the menu font size on the mobile as it’s really small?