Jump to content

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

Go to solution Solved by Ciodensky,

Recommended Posts

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Link to comment
  • Solution
13 hours ago, Ciodensky said:

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.

@creedon has helped me with this already. I need to scape the " with \" and so it was solved.

Pertaining to the question here, it was solved also with the same code above but with <br> insert right after the $199. So here's the correct code now:

<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<br></span>");
  });
});
</script

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.