Change product font size on mobile only

Hello. 

I hope someone can help me. I need to reduce the size of the product title and price for the landing page on mobile. I searched the forum and found a couple of solutions, but I may have conflicting code that is interfering with it.

I will try and explain;

1. I have set the general mobile styles and these are all working fine. 
2. The product title code also references 'H1' and if I change the initial mobile styles, it changes the product title. 
3. I need the initial mobile fonts to stay the same and only target the shop prices but when I add the new code, it has no effect. 

Hope that makes sense.

Cheers
Claire 🙂  

What is site url?

Hi @tuanphan

Sorry, I forgot to add that.

https://www.claireturnbull.co.nz/shop-products

Thanks!

@tuanphan I'm just wondering if you're able to help with this one? The site is live so it would be good to have your brilliant help.

Thank you 🙂

On 4/8/2023 at 1:56 PM, tuanphan said:

Use this CSS to target product price mobile

@media screen and (max-width:767px) {
body.view-list .product-price {
    font-size: 15px !important;
}
}

 

Thank you so much Tuan, you're the best!