Alright, so my partner has created a simple website, and has added a mortgage calculator to the bottom of the page from this website: http://www.mortgagecalculator.net/webmaster/
If you go to the page I linked, you’ll see the code he’s got copied to the page he created. From what it looks like, it should appear just the same on the created page as it does on the original page. However, when he copied it over, the spacing between the calculator section and the response/answer section is waaay bigger.
Originally he kept the width set to 100%, but readjusted it to be 1080px. That’s the only real change made. I’ve tried messing with adjusting margin and padding (no visible change I could see), shrinking the width (which just cuts off half the calculator), adding a webkit transform scale style piece (just made the whole section smaller, but still cut off part of the calculator), adding some style to the div containing the calculator instead of the calculator itself…nothing seems to be able to shrink the spacing between side 1 and side 2. I’ve included a picture with the spacing I’m talking about highlighted in yellow, in case my words aren’t making sense. The code is all at the link I added up top.
Any suggestions or thoughts on what else I could try? We want the spacing to be like the original, and I just don’t understand why I can’t adjust it with html/css to fix it. If I need to describe anything different/better, please just let me know and I will. I just want to figure out how to fix this! lol And, the site the calculator is on obviously isn’t mine so I have no way of affecting that. I did look at the source code/page inspect for the mortgage page, to see if I could find something I was missing…but if it’s there, I couldn’t find it / make it work. Would really appreciate any help!
It’s hard to say without seeing the code.
The site you linked to has a number of different js files linked to it. Any of these files could be altering the css.
You may also consider checking to see if there is any css in the original that is missing in the clone. For example, there is a col-2 class that wraps the color changing div on the original. If that is not present on the clone, then it could be the issue.
The problem I often encounter is having one class cancel out another class – this may also be something to look into.
Those things aside, you may try to use a negative left margin on the right div to move it over.
Hope this helps!
My guy’s site is super simple - pieced together from images using photoshop, so it’s just a table with some photos & a couple links, then this iframe at the bottom holding this calculator (the iframe is outside of the table). To make this easier to show (as I don’t think he wants me showing the whole site), I’ve taken the pertinent information out onto it’s own thing - testing it on a local notepad++ file gives me the same issue as it does on his site, so anyone could take this and throw it onto their local testing site and see the issue. (When I put it in codepen or jsfiddle it doesn’t show, I’m guessing since it uses an external link.) Here’s the code:
<head>
<style type="text/css">
body {margin:0; padding:0;}
.holder {display:flex; justify-content: center;}
</style>
</head>
<body>
<div class="holder">
<iframe class="frame" src ="http://www.mortgagecalculator.net/embeddable/?id=1" width="60%" frameborder=0 scrolling=no height=280></iframe>
</div>
</body>
He doesn’t have a separate css file so I’m putting the styling into the head. Also, I do know some of the tags on the iframe are HTML 4 instead of 5…that’s just what the site the calculator is from is using, and so I haven’t changed them yet. They don’t seem to be anything that would matter with the width of the padding…but if it seems that way to you please let me know and I’ll try it.
This is a pretty minor thing, not a real big deal…but it’s bugging me that what I think would work isn’t doing anything! lol
I just spent some time running through a few ideas and none of them worked.
It may just be one of those annoyances that comes with iframes. I’ve really never been able to get them to cooperate properly, so I personally avoid them when possible.
If it is really too annoying, there may be other such calculators that behave better with iframe.
Hopefully you’ll find someone who has the magic answer.
Thanks for trying! I kinda figure it must just be something we can’t affect. 
