What would be the best way to make something like this?

Support
#1

Hello,

I would like to make the text effect showed on the picture of this link https://imgur.com/Vmz5moY. Where there are 2 prices per product, one smaller and with a line.

Right now i have what is showed in picture below. I will have three prices for each product. So how can i make that the one most to the left looks smaller, then the middle one a little bit bigger(these two with the line) and the third one stay in the same size

#2

Hi @SXVBAKA,

You actually need to change your HTML code to this first:

<h5 class="man">Poki <span class="right"><span class="price1">$5.000</span><span class="price2">$5.000</span><span class="price3">$5.000</span></span></h5>

Then you need to add the CSS code below to X > Theme Options > CSS:

h5.man span.price1 {
    font-size: 13px;
    text-decoration: line-through;
}

h5.man span.price2 {
  font-size: 15px;
  text-decoration: line-through;
}

h5.man span.price3 {
  
}

This is a simple CSS related question and is not related to the theme functionality itself.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case if you still have problems.

Thank you.

#3

Thanks this worked perfectly!

#4

You are most welcome!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.