Please Help - Pricing Table Font + Space Issue, Squarespace

Hi I really need some help with my Pricing table widget.

I have completed it on Elfsight and it looks great. When I embed it into my Squarespace site, it automatically removes the default font to match my Squarespace font. I want to keep it how it originally looked on Elfsight. Once on Squarespace, there is also a huge gap underneath the titles and bullet points and doesnt match with what it looks like on Elfsight.

Is this possible? Please help!

1 Like

Can you share link link to page where you use Pricing Table?

1 Like

Hi @Jeremy_Bomford and welcome to Community :wave:

You can change the font by adding this code to the Custom CSS field on the Appearance tab:

.eapps-pricing-table{
  font-family: Arial !important; 
}

Please check it and let me know how it works :slightly_smiling_face:

As for the spacing issue, I’ve tried to check your website and it seems to be private now. If you could provide us with the temporary access to your website, please let me know and I’ll contact you in dm.

Hi Max, thank you so much for sending the code over.

I have inserted the code into my widget CSS on Elfsight. I believe it may be a Squarespace issue, because the second I upload it onto my page, Squarespace automatically converts the font to my Squarespace template font and it is so annoying!

I have made the website public temporarily so you can view. As you can see on the Pricing Table, it converts all of the font to Capitals only after you click on the tabs… ‘Property/Travel/Instagram’ and has huge spacing underneath the titles.

Services — Jeremy Bomford (scroll down)

I hope you can help! I really appreciate it. Many thanks,
Jeremy

1 Like

Thank you!

I see the font issue and I am really sorry about it!

As for the spacing, just want to make things clear. Do I understand correctly that you want to remove the spacing highlighted in the screenshot?

Thank you so much for replying Max!

Yes that is correct - that space is not there on the widget, it only happens once uploaded onto Squarespace.

The same with the font. Only happens once uploaded onto Squarespace (although in editor mode on Squarespace the font is fine). Very strange!

Do you think it is some custom CSS that needs to be inserted on Squarespace itself to stop them automatically changing the font / and adding space?

Thanks
Jeremy

1 Like

Thank you!

Please let me discuss it with our devs. I’ll get back to you a bit later :slightly_smiling_face:

We’ve adjusted your widget with the help of these CSS codes:

.eapps-pricing-table-columns-container{
  text-transform: none;
}
.eapps-pricing-table-column-title-container{
  height: fit-content !important;
  padding: 32px 32px 0 !important;
}

Check it out and let me know if you like what you see :wink:

You have made me so happy that this was possible! Wow it looks great!

Just one last thing - is it possible to make the Headline tabs (Instagram/Property/Travel) without the full caps? Then it is perfect and exactly what I’m looking for!

Honestly, thank you being so helpful and amazing!! I appreciate it so much!

1 Like

Thanks a million for your kind feedback! It means the world to us :heart:

Sure, I added this code and everything seems to be fine now:

.eapps-pricing-table-inner{
  text-transform: none;
}

Hi Max,

So grateful for your help.

I’m having another issue with the pricing table. Please check the website which is now live.
The spacing underneath the table on each tab is different - especially the ‘Travel’ tab, the bottom actually cuts off, and the other two tabs the spacing is too high.

The font is also still incorrect compared to the Elfsight default font. Is there some coding to choose a specific font on top of the coding we already have?

When the page loads for the first time, the font is also different as soon as you click on one of the tabs, it’s like it just refreshes itself.

Many thanks,
Jeremy

1 Like

Hi @Jeremy_Bomford :wave:

I see the issue with the spacing under the columns, but I couldn’t catch an issue with the font change.

Could you please send me a video screencast of the issue? It would be tremendously helpful!

Hello again!

Ignore the font change, that has fixed itself now. Just the spacing issue, and the option to be able to change font specifically would be great if possible?

Thank you :slight_smile:

Okay!

I’ve shared your request with our dev team and will get back to you once any news come up :wink:

Thank you for waiting!

Please add this code before the widget installation code and let me know if it helped:

<style>
  .eapps-pricing-table * {
    font-family:
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      "Roboto",
      "Helvetica",
      "Arial",
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol";
    letter-spacing: 0;
  }

  html.squarespace-damask .sqs-blockStatus {
    display: none !important;
  }
</style>