How can I make the base price smaller on product site (Theme Be Yours)?

[FABIAN2]

Hi, 

I need help with the Theme Be Yours. I want to make the size of the base/unit price (€/L) smaller than the product price. We sell in 30 ml containers. For the collection site where you have an overview of several Products, I was able to fix it. I couldn't figure out how to do it on a product-specific site. How does that work?

Any help would be greatly appreciated. 

[Boki97]

Can you share link 

[FABIAN2]

Here it is:

[Boki97]

small.unit-price bdi {
font-size: 12px !important;
}

[FABIAN2]

Hi Boki,

Thanks for the quick reply. in which CSS file do I need to do it? The code I currently have in the component-price.css is the following:

.unit-price {
  margin-top: 0.6rem;
  color: rgba(var(--color-foreground), 0.7);
  font-size: calc(var(--font-heading-scale) * 1.3rem);
  display: inline; /* Ensure the entire unit-price is inline */
  line-height: 1; /* Prevent line-height issues */
}

.unit-price bdi {
  font-weight: 400;
  font-family: var(--font-heading-family);
  font-size: calc(var(--font-heading-scale) * 0.9rem); /* Smaller font size */
  display: inline; /* Ensure bdi is inline */
  line-height: 1; /* Keep line height consistent */
}

[Boki97]

Try to add it to end of this file if is not working try to find general CSS file and add it there

[FABIAN2]

Thanks for the suggestion, but unfortunately it only seems to have an effect on the collections site.

[Boki97]

Try with different CSS file

[FABIAN2]

do you have any suggestion which css it might be?

[Boki97]

give me list of css files

[FABIAN2]

[Boki97]

base.css