Make the form look good on phones

[mgatland]

Our post.html page looks really bad. Let's improve it!

You don't need to get it perfect – we will probably change it again later.

You will be working in post.html and style.css

Right now, our form probably looks like this:

This layout isn't very good. It's especially bad on phones, which need bigger inputs.

Here is a great modern-looking form from trademe.co.nz:

Make our form look a bit more like the TradeMe one by making some of these changes:

Try adding this code to style.css as a starting point.

input {
    border: 1px solid orange;
    background-color: green;
    color: red;
}

button {
   color: blue;
   background-color: green;
   border: 1px solid red;
}

• [x] make it a vertical layout (each input is below the last, instead of beside). One way to do this is to add the css rule display: block; to anything that should be on a new line.
• [x] bigger font size
• [x] add more margin and padding to the inputs
• [x] Add a label above each input. You can use html like this: <label>Name:</label>
• [x] Add a heading to the start of the form saying what the form is for, i.e. <h2>Write your post</h2>
• [x] try some different colours?

Does your form look nice and spacious, like the TradeMe example?

How does it look on a phone?

To test how your site looks on a small screen, open the Developer Tools then click this button near the top left:

Now you get some options (above the web page) to choose what kind of phone you want to emulate. You can even rotate the screen!

You sometimes need to refresh the page each time you change the kind of phone, to make everything resize correctly.

The site might look super small. We need to add this line to the head of our page to make it work properly on phones:

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

• [x] Add the line above to the page. It should be in the head section.
• [x] Check: this should make the page look a little bit better in the mobile preview?
• [x] add the same line to every other HTML page in our site too, so its consistent.

buttons

Want to customise the buttons a little bit? Here are some great examples to try.

https://www.w3schools.com/css/css3_buttons.asp