Form not responsive

Hi there, 

I cant seem to get my form to respond to the responisve code. I've read several threads on here and it seems like all your forms should be responsive but for some reason mine isnt working that way. I have also tried to add the code below but nothing is happening..please help! 

/*-----------RESPONSIVE LAYOUT-----------*/

@media (max-width: 480px) {

.form-line.form-line-column, .form-all {

width: 100% !important;

}

.form-textarea,

.form-textbox,

.form-dropdown{

width: 100% !important;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.form-label-left, .form-label-right{

width: auto !important;

}

.form-buttons-wrapper{

margin-left:0 !important;

}

.form-input {

width: 100% !important;

}

.form-all{

width: 75% !important;

}

.form-sub-label-container {

width: 100% !important;

display: block  !important;

}

}

you can find the form here: http://www.naty.com/sv/kundtjanst/  - click the small "Support Request" link in grey letters underneath the buttons. 

Hi,

Please try to remove the custom CSS codes to your form and use the following widget instead: http://widgets.jotform.com/widget/mobile_responsive

You can add the widget by following this guide: http://www.jotform.com/help/252-How-to-Add-a-Widget-to-your-Form

See if this works.

Thanks

nothing happens, not sure if I added it right though. I put it in the form just before the submit button..is that how you do it? 

@johnnaty

Responsiveness CSS codes will not work on a lightbox-ed form like it would on a regularly embedded form or standalone form as lightboxes have a different html structure.

I'll try to do some tests and look for a workaround for you, if there's one available.

We will contact you as soon as we have any leads.

Thank you for your patience!

Hi there, 

We have found a simple workaround for the lightbox.

Please copy and paste the following css into your own css files or in a style tag in the page that has the lightbox form.


.protoplus-dim + div {
    width: 100% !important;
    max-width: 700px;
}

Can you please test this and see if it's an acceptable solution for you?

Thanks.

hi

I tried the work around, didnt solve the problem... other options?

Cheers,

Hans

Hi hgna, can you please share a link to your site so that I can test more extensively? Thanks.