Using media queries how do I make a form that is 600px wide when the screen is greater than or equal to 600px wide (my code included)?

Question

I'm thinking the following...

@media only screen and (min-width: 600px) {
.form {
width: 600px}
}

Am I correct?

Answer 1

You don't really need a media query for this. If you set the width at 600px and a max-width to prevent it exceeding 100% it will work.

 form { width: 600px; max-width: 100%; margin: 0 auto; }

 <form> <fieldset> <legend>Example Form</legend> <div> <label>Name<br /><input type="text" name="name" /></label> </div> <div> <button>Submit</button> </div> </fieldset> </form>