Jump to content

Related Products: Unable to modify Price font size?

Recommended Posts

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 by ShuiFeng
Link to comment

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*/

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.