add a thin line below price on product page

[ads18922]

Hello, i want to add a thin line below the price on my product page

this is my website, i want it to look something like this:

where there is a thin line underneath the price

my theme is dawn, website url is www.rosella-elegance.com , password is mechaw

[Mehran_Ali]

Hello @ads18922 

Follow these Steps:

1. Go to the online theme 
2. click on three dots and open the Code editor
3. Search for Theme.css / base.css 
4. Past that code and save it 

You can Simply add this CSS if you want that line to be shown in the Desktop view and mobile view both 

.price {
    border-bottom: 1px solid #bebebe;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

Or If you want it only on mobile version you can use this CSS code

@media(max-width:766px){
.price {
    border-bottom: 1px solid #bebebe;
    padding-bottom: 20px;
    margin-bottom: 30px;
}
}

 If this solution Work Kindly Like this And Marke it As a Solution 
And fuel me up by Buy Me A Coffee

[ads18922]

hello this didnt work

[Mehran_Ali · Accepted solution]

Hello @ads18922 

did you update that code into your base.css if yes and still didn't work 
then try adding this CSS block to your theme.liquid file just before </head> tag

<style>
.price {
    border-bottom: 1px solid #bebebe;
    padding-bottom: 20px;
    margin-bottom: 30px;
}
</style>

Because when I use the same code into Dom its works fine See

[ads18922]

that worked, thanks!

[ads18922]

wait, it works on the product page, but it also added a line to the product cards on the home page. Anyway you can make it so it just appears on the product page and not products cards?

[Mehran_Ali]

Hello @ads18922 

I have not encountered any issue on the home page 

[ads18922]

i didnt check desktop, but on mobile the line was showing underneath the products cards on the homepage. Can you check on mobile?