Jump to content

How to fix layout being broken by the non-breaking spaces in product prices?

Recommended Posts

Site URL: https://dunikal.com/magasin

So this is the issue I'm having:

When my Squarespace site is set to default language FR-CA, a non-breaking space is automatically inserted between the amount and dollar sign of all product prices. See below:

<div class="product-price" id="yui_3_17_2_1_1661790753009_214">
À partir de 179,98&nbsp;$

</div>

The problem I'm having is when trying to customize .product-price through css. Adding any font-family element to .product-price will make the non-breaking space super long and break the page layout (see images attached). The price displays fine with the default site fonts.

I can work around it with white-space: nowrap &  overflow: hidden, but it doesn't work in the related-category block.

Why does the non-breaking space act that way as soon as any font-family is added? Any way to control it?

Thanks

 

 

screenshot-dunikal.com-2022.08.29-12_29_39.png

screenshot-dunikal.com-2022.08.29-12_30_46.png

Edited by Dunikal
Link to comment
  • Dunikal changed the title to How to fix layout being broken by the non-breaking spaces in product prices?
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.