FROM CACHE - en_header
What's your biggest current challenge? Have your say in Community Polls along the right column.

How can I adjust the product title size in the stiletto theme for mobile?

Solved

How can I adjust the product title size in the stiletto theme for mobile?

missjewellee
Excursionist
43 0 2
‎02-01-2024 07:22 PM

Hi wonderful community,

 

I just got the stiletto theme, and the product title heading size is very small on mobile (desktop is in proportion). 

Where would I look to change this in theme file? Or does anyone have some code to add I can play around with the sizing? For mobile only. 

www.glowmumma.co.nz

password glow123

TIA

820 Views
0 Likes
Report
Accepted Solutions (4)

Dan-From-Ryviu
Shopify Partner
10291 2043 2114
‎02-01-2024 09:16 PM

This is an accepted solution.

Hi @missjewellee 

Go to Online store > Themes > Edit code > open theme.liquid file, add this code below after <head> element

<style>
@media (max-width: 749px) {
.fs-heading-4-base { font-size: 24px !important; }
}
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

794 Views
0 Likes
Report

suyash1
Shopify Partner
10193 1259 1600
‎02-01-2024 09:18 PM

This is an accepted solution.

@missjewellee - please add this css to the very end of your theme.css file and check

 

@media screen and (max-width:749px){
.product__title{font-size: 24px;   line-height: 32px;}
}

 

suyash1_0-1706840324845.png

 

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

View solution in original post

794 Views
1 Like
Report

ZenoPageBuilder
Shopify Partner
1052 203 227
‎02-01-2024 10:51 PM

This is an accepted solution.

Hello @missjewellee 👋

In Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

@media (max-width: 959px) {
    .product__title {
        font-size: 24px !important;
    }
}

The result

Screenshot 2024-02-02 at 10.51.27.png

Hope that helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com

View solution in original post

781 Views
1 Like
Report

niraj_patel
Shopify Partner
2378 514 507
‎02-02-2024 01:01 AM

This is an accepted solution.

Hello @missjewellee 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
@media screen and (max-width:767px){
h1.product__title.ff-heading.fs-heading-4-base.fs-heading-3-base-ns {
font-size: 33px !important;
}
}
</style>

techlyser_web_0-1706853660296.png

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

778 Views
0 Likes
Report
Replies 5 (5)

Dan-From-Ryviu
Shopify Partner
10291 2043 2114
‎02-01-2024 09:16 PM

This is an accepted solution.

Hi @missjewellee 

Go to Online store > Themes > Edit code > open theme.liquid file, add this code below after <head> element

<style>
@media (max-width: 749px) {
.fs-heading-4-base { font-size: 24px !important; }
}
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

795 Views
0 Likes
Report
In response to Dan-From-Ryviu

missjewellee
Excursionist
43 0 2
‎02-02-2024 07:32 PM

Thank you so much I ended up using your code 🙂 

 

would you know if it is possible to centre the product options for everything above the buttons? (Product title, price, quantity selector) If possible with this theme? Thanks a bunch!

758 Views
0 Likes
Report

suyash1
Shopify Partner
10193 1259 1600
‎02-01-2024 09:18 PM

This is an accepted solution.

@missjewellee - please add this css to the very end of your theme.css file and check

 

@media screen and (max-width:749px){
.product__title{font-size: 24px;   line-height: 32px;}
}

 

suyash1_0-1706840324845.png

 

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
795 Views
1 Like
Report

ZenoPageBuilder
Shopify Partner
1052 203 227
‎02-01-2024 10:51 PM

This is an accepted solution.

Hello @missjewellee 👋

In Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

@media (max-width: 959px) {
    .product__title {
        font-size: 24px !important;
    }
}

The result

Screenshot 2024-02-02 at 10.51.27.png

Hope that helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
782 Views
1 Like
Report

niraj_patel
Shopify Partner
2378 514 507
‎02-02-2024 01:01 AM

This is an accepted solution.

Hello @missjewellee 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
@media screen and (max-width:767px){
h1.product__title.ff-heading.fs-heading-4-base.fs-heading-3-base-ns {
font-size: 33px !important;
}
}
</style>

techlyser_web_0-1706853660296.png

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
779 Views
0 Likes
Report

Community Blog Articles

top members.webp
Holiday Cheers to Our Community | November '24

Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...

By JasonH Dec 6, 2024
starting.webp
Dropshipping Viral Products to Sell in 2025

Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...

By JasonH Nov 27, 2024
top members.webp
Shining a spotlight on our top members of October 2024!

Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...

By JasonH Nov 14, 2024
Terms of Service Privacy Policy