How to increase item title font size in product grid

Hi,

May I know how I can edit the title font size for the items in the product grid please?

Thank you!

Hello,

Product title can be changed by custom CSS. Add this code the Theme settings > custom CSS:

.product-grid-item .product-title{
    font-size:30px;
}

Change font-size value as per your needs.

Best Regards

thank you for the CSS. it works on desktop browser, but not on mobile browser. may i know how to get it to work on mobile browser too?

Hello,

Make sure you have added the CSS to Global Custom CSS.

Best Regards

Yes, i did add to Global Custom CSS, but it doesn’t reflect on mobile browser, you can refer to the private link attached 🙂

Hello,

I have checked and see that the title is the same on mobile and desktop:

Please clarify.

Best Regards

Hi,

I can see the codes in the screenshots that you posted. But on my mobile browser, the font size is not displayed correctly. Just wondering, on your mobile, does the title display as big as the desktop? Mine don’t.

Hello,

Please add this code to Theme Settings > Custom CSS > Global CSS

@media (max-width: 480px) {
	div.product-grid-item.col-xs-6 .product-title {
     font-size: 18px;
	}
}

Best Regards

Hi,

Just to confirm, I should paste the following in Global CSS, correct?

.product-grid-item .product-title{
    font-size:28px;
}

@media (max-width: 480px) {
	div.product-grid-item.col-xs-6 .product-title {
     font-size: 28px;
	}
}

Hello,

Yes, exactly. Add it to Global CSS.

Best Regards

thank you!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts