Reduce font size on mobile slideshow

Highlighted
New Member
5 0 0

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

0 Likes
Highlighted

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

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
5 0 0

www.noovuhealth.com 

password is FontSizeNoovu

Thanks!

0 Likes
Highlighted
Astronaut
1075 173 211

@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;

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
5 0 0

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

0 Likes
Highlighted
Astronaut
1075 173 211

@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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted

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.

Screenshot at Aug 11 11-22-04.png

 

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

- Tips to optimize website loadspeed: academy.pagefly.io/how-to-speed-up-website

- Do you need to customize your landing page, product page, blog, coming soon, FAQ, about us pages? Check out PageFly - Advanced Shopify Page Builder.
0 Likes
Highlighted
New Member
5 0 0

Still no luck @diego_ezfy.  Any other ideas?

0 Likes
Highlighted
Astronaut
1075 173 211

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted

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;
}
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes