CODEWITHSUNDEEP
javascripthtmlcssmobilescreen
Dmytro Zarezenko
Dmytro Zarezenko

Reputation: 10686

How to make the page to fit screen width on mobile device?

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!

Upvotes: 0

Views: 9001

Answers (1)

Ennui
Ennui

Reputation: 10190

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.

Upvotes: 4

Related Questions