Making forms responsive

I'm using bootstrap in my dw template file, and have applied that template to pages using several web assist forms and search/results pages.

Currently, the only devices that don't look correct are smart phones.

On pages without webassist, the template pages reduce to the size of the device as they should. On pages with the forms, the forms stick out too far to the left, creating white space above and below the form, making the template too small and not fit the screen any longer.

I've added a media query for 760 px and adjusted the Wrapper css to 100%, but it makes no difference. Tried to add a bootstrap container class to the WA form element, but it makes no difference either.

This happens on every page there is a webassist addition.

Please send a sample URL and I'll take a look.

See PM

The problem isn't with the form. It is the results you have on the page with the form. Tables won't wrap to multiple lines and your table won't fit on small devices by simply shrinking naturally.

I added a few media queries in the css on the page and created a functional solution for shrinking your tables into one cell for phones. You can use a similar technique on other pages where you have this problem.

This post has been deleted.

This post has been deleted.

Not getting the same results on other pages. Is the following the only css added?

@media screen and (max-width: 480px) {
.notPhone {
display: none;
}
}
@media screen and (min-width: 481px) {
.phoneOnly {
display: none;
}
}

Yes, but I also added elements to the page using those classes. Search for notPhone and phoneOnly on that page to see where and how I used it.