Reduce font size on mobile slideshow

[TysNoov]

Hello all,

I need to reduce the font size of my mobile header and subheader on my slideshow but I can't figure out how to do it.  I am using the Parallax theme.   My desktop view looks great but the font is just too big on the mobile view.  Any suggestions?  Thanks!

Tyson

[oscprofessional]

Hello TysNoov,
Please share your site url.
So that i can check and let you know the exact solution here.

[TysNoov]

www.noovuhealth.com 

password is FontSizeNoovu

Thanks!

[diego_ezfy]

@TysNoov 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

@media (max-width: 767px){
    .slides .headline{
    font-size: 12px !important;
}
.slides .subtitle,
.slides .subtitle *{
    font-size: 10px !important;
}

}

You can play around with the font sizes.

12px is for the title
10px is for the subtitle

let me know whether it works;

[TysNoov]

Hey @diego_ezfy I don't see a file labeled theme.scss.liquid.  Could it be labeled something else?

[diego_ezfy]

@TysNoov  In this case do this: 

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>
@media (max-width: 767px){
    .slides .headline{
    font-size: 12px !important;
}
.slides .subtitle,
.slides .subtitle *{
    font-size: 10px !important;
}

}
</style>

Please let me know whether it works.

Kind regards,
Diego

[QuangN]

Hi @TysNoov,

You can also try this code, the value of the font size can be adjusted to your liking:

@media screen and (max-width: 767px) {
  .hsContent .headline { font-size: 20px !important; }
  .hsContent .subtitle { font-size: 18px !important; }
}

 By the way, I think you should remove or reduce the size of the blue bar on mobile, it's too big and is taking too much space.

You can take a look at this article about optimizing your page for mobile devices.

[TysNoov]

Still no luck @diego_ezfy.  Any other ideas?

[diego_ezfy]

Please send a screenshot of your theme.liquid file after you paste the code

[oscprofessional]

Hello TysNoov,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->styles.scss.liquid

@media only screen and(max-width:767px){
.slides .headline {
    font-size: 12px!important;
}
.slides .subtitle {
    font-size: 10px!important;
}
}