Squarespace embedded form is not mobile responsive

Hrmkay, here's another one… I'm trying to get the squarespace form to be responsive,
embedded in Squarespace.
I have the width set to 960:
Though it's also 1000px:
And here I checked “Make this form responsive”
I embedded using the Squarespace module under Publish > Platforms:
But it's not resizing or anything on my site. Check it out, scroll down a bit:
https://iqx.squarespace.com
Any ideas?
- Lee
Founder & Creative Director @ Cozy cozydesign.com

Please try adding the mobile responsive widget: https://widgets.jotform.com/widget/mobile_responsive 

Let us know if you need more help.

That didn't really help… this slider widget just isn't responsive-friendly. It's
so wide with the three-column layout of question-slider-value. And crunched down
there are a couple suboptimal layout issues:
Is there an option I'm not seeing to put the slider questions above the sliders instead of to the left of them? It'd be amazing if that was
available only on really narrow (read: mobile) screens, but even if it was
everywhere it'd be nice.
- Lee
Founder & Creative Director @ Cozy cozydesign.com
...

Using the form URL https://www.jotform.us/form/61254802251144 was responsive on moble browser when I test

 

On the website https://iqx.squarespace.com/?r=85337764 it looks much better as well.

 

Can you also share to us a screenshot on how it looks on your mobile browser on the website? It will help us identify more what could be the differnce on your side.

We will wait for your update.

Thanks.

 

Hey, thank you for the comment. Looks pretty good on your screen, though on mine the filled bar blows out past its container when it gets pretty full. See the 15:

 

 

Relatedly though, I'm trying to make the form fill the width responsively. So here it is on desktop; note that the slider bars are far narrower than their white container:

 

 

The second thing I'd like to solve for is getting commas into that result number, so that "$174720" instead looks like "$174,720". Any leads there?

 

Thank you so much! Support makes all the difference…

(Looks like my images were lost, lemme try again, this time with backup links to them, in the body)

Hey, thank you for the comment. Looks pretty good on your screen, though on mine the filled bar blows out past its container when it gets pretty full. See the 15:

 

http://cozy.es/1kzQo

 

Relatedly though, I'm trying to make the form fill the width responsively. So here it is on desktop; note that the slider bars are far narrower than their white container:

http://cozy.es/11ysC

 

 

The second thing I'd like to solve for is getting commas into that result number, so that "$174720" instead looks like "$174,720". Any leads there?

 

Thank you so much! Support makes all the difference…

Can you check it with a real device? I checked this with iPhone 6S and it's already responsive on both portrait and landscape. Your screenshot seems like a mobile emulator of your browser, that doesn't provide a 100% accuracy on the result. 

 

Hey there… looks like it was not working right when I resized the browser, but if I then refresh, it looks okay. I"m okay enough with this – most people will just load the page (at whatever size) once, and then be done with it.

By the way, through CSS I overrode the display on this whole thing to switch it over to flexbox so I could get it truly responsive, control the widths, and even change the order of the columns. 

 

 

So the only thing that remains is my "second thing":

 

Sometimes it happens when you are testing using an emulator, and it seems like you were using Google Chrome, then as you already noticed you need to refresh the webpage in order to load it responsively; however, it is good to know this is resolved. 

Regarding to your second question, I have moved it to a separate thread and you will find it on this link: https://www.jotform.com/answers/839054. 

We will assist you with that as soon as possible.