ShuiFeng Posted June 26, 2022 Share Posted June 26, 2022 (edited) Site URL: https://shuifeng.squarespace.com Why isn't the below code working to modify the Price font for Related Products? I don't know what I'm missing - I've tried a bunch of combinations and nothing is working. I'm able to modify the Title/Description fonts without issue, but not the Price font. Password: ShuiFeng div.ProductItem-relatedProducts .product-price { font-size: 1.5rem; } EDIT: I figured out that I have some custom CSS that impacts both the Price on the Product Page and the Price under Related Products? Is there a way to separate the two so that I can adjust the Product Page Price separate from the Related Products Price? Here's the code /*Product Page Price font size*/ product-price, .product-price * { font-size: 28px !important; font-family: 'Kepler Std' !important; font-weight: 400 !important; color: #000 !important; } /*Product Page Price font size*/ Edited June 26, 2022 by ShuiFeng Link to comment
tuanphan Posted June 26, 2022 Share Posted June 26, 2022 Can you share link to a product? We can check related price easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ShuiFeng Posted June 26, 2022 Author Share Posted June 26, 2022 Yeah, sure, sorry. https://activefengshui.com/shop/p/what-the-feng It's odd - I can target div.ProductItem-relatedProducts .product-price and if I enter display:none; the Related Products Price is no longer displayed but if I try to change the font with font-size: nothing happens. So I'm targeting the correct element but font modifications aren't working? Link to comment
ShuiFeng Posted June 26, 2022 Author Share Posted June 26, 2022 I found the offending code. In some font code I had .product-price, .product-price * as my target and it of course targeted all the prices... so I split the code into two sections, one targeting .ProductItem-relatedProducts .product-price and the other targeting .ProductItem-details .product-price. Offending Code: /*Related Products Price font size*/ product-price, .product-price * { font-size: 20px !important; font-family: 'Kepler Std' !important; font-weight: 400 !important; color: #000 !important; } /*Related Products Price font size*/ Working Code: /*Related Products Price font size*/ .ProductItem-relatedProducts .product-price { font-size: 20px !important; font-family: 'Kepler Std' !important; font-weight: 400 !important; color: #000 !important; } /*Related Products Price font size*/ /*Product Page Price font settings*/ .ProductItem-details .product-price { font-size: 26px !important; font-family: 'Kepler Std' !important; font-weight: 400 !important; color: #000 !important; } /*Product Page Price font settings*/ For Mobile: /*Related Products Price font size MOBILE*/ @media only screen and (max-width: 768px){ .ProductItem-relatedProducts .product-price { font-size: 14px !important; font-family: 'Kepler Std' !important; font-weight: 400 !important; color: #000 !important; }} /*Related Products Price font size MOBILE*/ tuanphan and cami_leisk 2 Link to comment
tuanphan Posted June 30, 2022 Share Posted June 30, 2022 Did you solve or still need help? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ShuiFeng Posted July 5, 2022 Author Share Posted July 5, 2022 Tuan, I got it, thanks! One piece of code was conflicting with another. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment