move sale price beside normal price

Store Design
,
1

Hello,

I have added this code to get a line under the price:


And it looks good on all products, except those that are on sale because then there are two prices showing and they have the same id so both get a line under them.

I therefore wonder how to move the prices so they are beside each other.

my product page: [https://r1vex.myshopify.com/products/lindberg-avesta-halsvarmare-baby-sudan-brun](https://r1vex.myshopify.com/products/lindberg-avesta-halsvarmare-baby-sudan-brun)

How it looks now:

![Skärmavbild 2024-10-31 kl. 15.57.02.png|2280x874](upload://gPb8YJoxOj8fdT5SAWsvlnn6MhV.jpeg)

How i would want it to look:

![Skärmavbild 2024-10-31 kl. 15.57.23.png|2280x876](upload://ksxCNKE7zvwRiViylfyesHaoJQ1.jpeg)

Thanks for helping!
2

Hi. You can use this code.

.product-price {
    display: inline !important;
}
/* Add margin to the second price */
.product-price:nth-of-type(2) {
    padding-left: 15px !important; /* Space between prices */
}

If i managed to help you, please like and accept this as solution. Thank you

3

It worked, but now the line is no longer full width?

Skärmavbild 2024-10-31 kl. 16.39.31.png
Skärmavbild 2024-10-31 kl. 16.39.31.png1770×690 75.8 KB

4

Try this code

.product-price::after {
    content: ""; 
    display: block;
    border-bottom: solid 1px #482e2e40;
    width: 100%; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
}
5

Thanks, but there is no element with the id: .product-price::after

6

can you give me store access? I can do these customization for you.