close ad
WARNING PC USERS: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Making forms responsive

Thread began 8/29/2016 12:48 pm by tmcbinc99963 | Last modified 8/29/2016 5:11 pm by Ray Borduin | 186 views | 7 replies |

tmcbinc99963

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.

Sign in to reply to this post

Ray BorduinWebAssist

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

Sign in to reply to this post

tmcbinc99963

See PM

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

tmcbinc99963

This post has been deleted.

tmcbinc99963

This post has been deleted.

tmcbinc99963

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;
}
}

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...