I have the one form page. I need this form scaled and fit to screen width on any device (Android, iOS, ...). How can I do it with HTML or CSS? style="width:100%" is not a solution in my case.

Thanks!

I have the one form page. I need this form scaled and fit to screen width on any device (Android, iOS, ...). How can I do it with HTML or CSS? style="width:100%" is not a solution in my case.

Thanks!

• javascript
• html
• css
• mobile
• screen

• Use media queries. Look up responsive design. – Josh Crozier Commented Sep 30, 2013 at 17:15

1 Answer 1

Why is width:100% not an option?

You can use media queries to target different screen sizes like so:

form {
    width: 800px;
}

@media only screen and (max-width: 800px) {
    form {
        width: 100%;
    }
}

The above code would make form 800px wide on any screen wider than 800px, and if it is displayed on a screen size equal to or below 800px wide it will be 100% instead. You can use as many of these as you want, so for instance you could put another media query after this for max-width: 500px and change the form styles accordingly for screen sizes 500px and below.