How to adjust the size of the title?

Solved

How to adjust the size of the title?

NikosBat
Trailblazer
449 1 94

Hello guys, how can I adjust the size of this title?

 

1.png

Accepted Solution (1)
BiDeal-Discount
Shopify Partner
569 66 140

This is an accepted solution.

what is the screen width of your mobile screen?
if it larger 768px you can use:

@media screen and (min-width: 768px){
  .product__title h1 {
    font-size: 25px;
  }
}

 

if it larger 990px you can try:

@media screen and (min-width: 990px){
  .product__title h1 {
    font-size: 25px;
  }
}
- Helpful? Like & Accept solution!
- BiDeal Bundle Volume Discounts: Upsell with discount bundles, quantity breaks, volume discounts & mix-and-match bundles. AOV+ with free gifts, free shipping & progressive cart
- Bify app: Shopify automatic discount solutions
- Contact me? support@bify.app or WhatsApp: +84974709330

View solution in original post

Replies 13 (13)

BiDeal-Discount
Shopify Partner
569 66 140

Hi @NikosBat 

yes we can

let try to add custom CSS as:

.product__title h1 {
  font-size: 25px;
}

The size you can fill as you want.

This code maybe not exactly work on your theme so it will better to give you solution if you can share me the site url & password (if applicable)

- Helpful? Like & Accept solution!
- BiDeal Bundle Volume Discounts: Upsell with discount bundles, quantity breaks, volume discounts & mix-and-match bundles. AOV+ with free gifts, free shipping & progressive cart
- Bify app: Shopify automatic discount solutions
- Contact me? support@bify.app or WhatsApp: +84974709330
NikosBat
Trailblazer
449 1 94

Hello and thanks for your answer, the thing is that if I paste this code in the CSS, then the mobile version Titel gets too big. Is there any other solution only for desktop users?

BiDeal-Discount
Shopify Partner
569 66 140

yes you can limit for desktop screen only by this code:

@media screen and (min-width: 750px){
  .product__title h1 {
    font-size: 25px;
  }
}
- Helpful? Like & Accept solution!
- BiDeal Bundle Volume Discounts: Upsell with discount bundles, quantity breaks, volume discounts & mix-and-match bundles. AOV+ with free gifts, free shipping & progressive cart
- Bify app: Shopify automatic discount solutions
- Contact me? support@bify.app or WhatsApp: +84974709330
NikosBat
Trailblazer
449 1 94

Hey there, for some reason if I add this code to my CSS, the mobile view changes too.

BiDeal-Discount
Shopify Partner
569 66 140

This is an accepted solution.

what is the screen width of your mobile screen?
if it larger 768px you can use:

@media screen and (min-width: 768px){
  .product__title h1 {
    font-size: 25px;
  }
}

 

if it larger 990px you can try:

@media screen and (min-width: 990px){
  .product__title h1 {
    font-size: 25px;
  }
}
- Helpful? Like & Accept solution!
- BiDeal Bundle Volume Discounts: Upsell with discount bundles, quantity breaks, volume discounts & mix-and-match bundles. AOV+ with free gifts, free shipping & progressive cart
- Bify app: Shopify automatic discount solutions
- Contact me? support@bify.app or WhatsApp: +84974709330
NikosBat
Trailblazer
449 1 94

Hello, thank you I appreciate it.

BiDeal-Discount
Shopify Partner
569 66 140

Hi @NikosBat 

Does it work as expectation?

- Helpful? Like & Accept solution!
- BiDeal Bundle Volume Discounts: Upsell with discount bundles, quantity breaks, volume discounts & mix-and-match bundles. AOV+ with free gifts, free shipping & progressive cart
- Bify app: Shopify automatic discount solutions
- Contact me? support@bify.app or WhatsApp: +84974709330
NikosBat
Trailblazer
449 1 94

Yes it works, thank you once again.

 

BiDeal-Discount
Shopify Partner
569 66 140

Thank you for your confirmation. Let me know if you need any other help.

 

If it's helpful, don't forget to mark it as acception.

- Helpful? Like & Accept solution!
- BiDeal Bundle Volume Discounts: Upsell with discount bundles, quantity breaks, volume discounts & mix-and-match bundles. AOV+ with free gifts, free shipping & progressive cart
- Bify app: Shopify automatic discount solutions
- Contact me? support@bify.app or WhatsApp: +84974709330

Mustafa_Ali
Explorer
430 43 79
<style>
@media screen and (min-width: 768px){
.product__title h1 {
  font-size: 25px;
 }
}
</style>

hey @NikosBat try this 

NikosBat
Trailblazer
449 1 94

Thanks for your answer, this changes nothing for me.

godofprogrammer
Excursionist
12 0 5

You can adjust the title size by modifying the CSS associated with it. Look for the class or ID in your theme's CSS file and change the font-size property—for example, font-size: 32px;. If you're unsure where to place the code, you can add it in Online Store > Themes > Edit Code > Assets > theme.css or similar, depending on your theme.

NikosBat
Trailblazer
449 1 94

Hello thank you very much I appreciate it.