How to make a form mobile friendly?

Question

I have some simple form, that looks good in browser:

Browser screenshots.

However when I load this page from mobile device, the form looks very small:

Mobile screenshot.

What is the best way to make this form pretty for mobile-looking, on the full mobile screen? Should I do it with CSS or Bootstrap? Is there some general way to reach it?

your question would is primarily opinion based and that's off topic on SO. Add some code to make it relevant. — neophyte, Mar 20 '17 at 12:13
@ZimSystem The code is trivial, all what I needed was a meta `viewport` tag. — Claude, Mar 20 '17 at 13:33
@neophyte no no, there is a concrete answer on my questions, just to use one meta tag. — Claude, Mar 20 '17 at 13:34

score 15 · Accepted Answer · answered Mar 20 '17 at 12:13

Add a meta viewport tag to make the form fit the cell phone screen.The viewport is the user's visible area of a web page. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

More details on viewport

score 2 · Answer 2 · answered Mar 20 '17 at 12:13

2

Add this meta tag to the head of the page,

<meta name="viewport" content="width=device-width, initial-scale=1.0">

You can also use bootstrap grid layout.

answered Mar 20 '17 at 12:13

LIJIN SAMUEL

883
4
12

1

Thank you very much! It works! Btw what do you mean by bootstrap grid layout? Could you drop me the link please. – Claude Mar 20 '17 at 13:20
1

Please go through the link https://v4-alpha.getbootstrap.com/components/forms/ – LIJIN SAMUEL Mar 20 '17 at 13:46

score 2 · Answer 3 · answered Mar 20 '17 at 12:16

2

css scale method

div {
-ms-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}

find more at : https://www.w3schools.com/css/css3_2dtransforms.asp

you may use the @media min-width and max-width to have more css for every screen..

answered Mar 20 '17 at 12:16

Burhan Kashour

674
5
15

you can see a bit of solutions, html- css- js and so.. choose the one you find it better – Burhan Kashour Mar 21 '17 at 10:01

How to make a form mobile friendly?

3 Answers3