Jump to content

Calculator widget messing up footer

Go to solution Solved by creedon,

Recommended Posts

The mortgage calculator widget I'm using here (https://www.j2tampa.com/calculator) is screwing up the footer on that one page. The code is below. It's in a code block, no code injection. 

This page (https://www.welcomehomefunding.com/calculator/mortgage-payment) is using the same calculator and their footer is fine. Where have I gone wrong? 

 

<meta charset="utf-8"><link rel="stylesheet" type = "text/css" href="https://www.cmgfi.com/CMGCalc.css"><script src="https://www.cmgfi.com/CMGCalc.bundle.js"></script><section id="calculator" class="calculator-section"></section><script> var settings={tabs:{highcharts:{column:{Interest: '#006787',Principal:  '#000000'},pie:{Principal: '#000000',Interest:  '#000000',Taxes: '#000000',Insurance: '#000000',MortgageInsurance:  '#000000'}},buttonColor:  '#000000',highlightedTextColor:  '#000000',highlightedTextColorLight: '#000000',headerColor:  '#000000',lo:  'false',loName:  ' ',loTitle:  '',loNmls:  '',loImageurl:  '',loLocation:  ', ',loPhone:  '',loEmail:  '',loMysite:  '',loApplynow: '',loLogo:''}}</script><script>  var params={navigateMode: true,calcMode:  'Mortgage',footnote: true,amortTab: true,displayLO: false}</script><script> var calc=new CMGCalc($('#calculator'),params,settings);  calc.init(); </script>

Link to comment
  • Solution

Ah. I see the issue now.

Here's the deal. Your CSS for that calculator is based on bootstrap. BS is a website design system as SS is a design system and you are trying to have two different incompatible systems combine which causes issues.

Can you find a calculator that doesn't depend on a design system? One that is more standalone code wise?

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
8 minutes ago, creedon said:

Ah. I see the issue now.

Here's the deal. Your CSS for that calculator is based on bootstrap. BS is a website design system as SS is a design system and you are trying to have two different incompatible systems combine which causes issues.

Can you find a calculator that doesn't depend on a design system? One that is more standalone code wise?

Aha! Well, that's disappointing, but there'll be other good ones out there. I appreciate the explanation--now I can mourn the loss and move on lol. Thanks so much!

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.