Solved

Change product title size stiletto theme

missjewellee
Excursionist
43 0 1

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

Accepted Solutions (4)

Dan-From-Ryviu
Shopify Partner
7011 1326 1352

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

suyash1
Shopify Partner
8989 1117 1466

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
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI

View solution in original post

ZenoPageBuilder
Shopify Partner
1052 203 219

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

techlyser_web
Shopify Partner
1122 215 235

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.

Techlyser || 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

Replies 5 (5)

Dan-From-Ryviu
Shopify Partner
7011 1326 1352

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

missjewellee
Excursionist
43 0 1

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!

suyash1
Shopify Partner
8989 1117 1466

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
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI

ZenoPageBuilder
Shopify Partner
1052 203 219

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

techlyser_web
Shopify Partner
1122 215 235

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.

Techlyser || 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