Divide the line text into 2 by having a line break and the 1st line font-size should be bigger text than 2nd line

Site URL: https://www.xystema.com/

Hi!

I am trying to break a line text into 2 and I want the first line font-size bigger than the 2nd line.

Attached the screenshots of what I am having now and what I want to happen.

Website details:

        www.xystema.com

        password: 061298

I will appreciate any help. Thanks so much.

Hi,

Where is page in screenshot?

15 hours ago, tuanphan said:

Hi,

Where is page in screenshot?

It is right there. But I am sending it again here below. Please let me know if you are not seeing it again.

Hi,

I meant can you share link to page where you have problem? I don't see it on homepage

5 minutes ago, tuanphan said:

Hi,

I meant can you share link to page where you have problem? I don't see it on homepage

Hi Tuan, sorry, here's the link:

https://www.xystema.com/pricing

by the way, I am using the Shinypass for the automatic currency conversion there, fyi.

On 11/2/2021 at 7:31 AM, Ciodensky said:

Hi Tuan, sorry, here's the link:

https://www.xystema.com/pricing

by the way, I am using the Shinypass for the automatic currency conversion there, fyi.

Try adding to Design > Custom CSS

span.convertedPrice {
    display: block !important;
}

11 hours ago, tuanphan said:

Try adding to Design > Custom CSS

span.convertedPrice {
    display: block !important;
}

 

Hi Tuan,

With your suggested code, I am able to separate the $199.00 to the 1st line. But since you separated the span.convertedPrice to a block, the "every month" separated as well to 3rd line. And I cannot be able to increase the font-size of the 1st line because the convertedPrice comes from the Shinypass (automated currency converter).

What I am trying to achieve now, since I could do the replace script code, as follows, I want to change the style upon replaced but looks like something is missing with my script (paste on the settings > advanced > code injection > header).

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {  
	$(".product-price").html(function() { 
      return $(this).html().replace("$199.00", "<span style="font-size: 40px;font-weight:Bold;">$199</span>");
  });
});
</script

Can you help me figure out what's wrong with my script? Why the style is not working.