-
Issue description: Well when I built the calculator on my desktop the interactive part was on the left where you did your inputs and the results were on the right in a blue card.. I embedded the code and on desktop on my website it’s vertical versus horizontal. I understand that during mobile it will compress and probably go vertical. I was hoping it Would recognize what size screen it’s on and change so it looks more user friendly. If you see in the middle of my home page i Included below to a link. You can see the Calculator remains vertical and doesn’t look the same at all in the builder.
-
Link to the page with the widget in question: HOME ac repair | Climate Experts A/C and Heating Inc
Hi there, @william9 
The widget is displayed vertically because it’s currently installed inside an iframe:
The container itself has three sections, and the widget is placed in the middle one. Because of this, the Results section appears below the input fields:
To fix this, please try reinstalling the widget without using an iframe. To do this, replace your current installation code with the following one:
<script src="https://custom-scripts.elfsightcdn.com/public-scripts/hostinger-and-go-daddy/install-widget.js" data-banner></script>
<div class="elfsight-app-WIDGET_ID"></div>
Note: Don’t forget to replace
WIDGET_IDin the second line of the code with your widget ID.
With this installation method, the widget won’t be visible in the backend, but it should appear correctly after publishing.
Once you’ve reinstalled the widget, please let us know, and we’ll help adjust its appearance with CSS code 
This sounds like good advice and I will give that a try but issue is I’m using provided website builder through my host and you only have two ways to add code;
You can embed it using a element, which it puts it in the body wherever you choose to put it with editing open, but you don’t get the open source code and move it around or change anything you can simply add it or delete it.
The second way it’s called integration and it has some kind of open source code window for code and you just leave it in there but it chooses where to put it and I wouldn’t have a lot of choices on placement and what not.
I haven’t been happy with this website builder software, but I will see if I can’t use the embedding and use a different script that you are recommending and see how it works. I can try it both ways and see if I can’t make it work if not I’ll just have to live with the results.
TIA
When you say make sure I put my widget ID in there are you talking about this number?
<div class="elfsight-app-8eefb073-622b-42f1-9c48-1f343b983e01" data-elfsight-app-lazy></div>
app-8eefb073-622b-42f1-9c48-1f343b983e01
so this is the code?
Yes, here is how the whole code will look:
<script src="https://custom-scripts.elfsightcdn.com/public-scripts/hostinger-and-go-daddy/install-widget.js" data-banner></script>
<div class="elfsight-app-8eefb073-622b-42f1-9c48-1f343b983e01></div>
I appreciate the help and the effort and the quick responses however now what’s happening is no matter if I put it in the source code area of the website builder or embedded in the body, it doesn’t fix it.. Yeah I mean your your new code when I put it in the source code area does visually change the way it’s supposed to but the builder is placing below the footer. So I will keep both The new script and I will talk to the host service AI or a live host to ask them where the best place to put it to get it where I want it… So it’s back to the way it was for now. I’m very limited to I can place code. So yes Your new code does make it look correct but it’s just in the wrong place.
Your website is built on the Hostinger plarform, right?
If so, we have a guide explaining how to add a widget to any place on the page. Please try to follow these steps and let me know if it helped or if your backend options are different.