Help writing a media query for my css file

• Alter your contact form responsive behavior to conform to the following: If the size of the page is above 600px the form should be 60% of the page and be centered. If the size of the page is below 600px the form should take up 100% of the page.

• My contact form is "contactForm" in my css file

My code:

body{ font: 15px/1.5 Arial, Helvetica,sans-serif; padding:0; margin:0; background-color:#f4f4f4; } /* Global */ .container{ width:80%; margin:auto; overflow:hidden; } ul{ margin:0; padding:0; } .button_1{ height: 38px; background: #008080; border: 0; padding-left: 20px; padding-right: 20px; color: #ffffff; } .dark{ padding:15px; background:#35424a; color:#ffffff; margin-top:10px; margin-bottom:10px; } /* Header **/ header{ background:#35424a; color:#ffffff; padding-top:30px; min-height:70px; border-bottom:#008080 3px solid; } header a{ color:#ffffff; text-decoration:none; text-transform: uppercase; font-size:16px; } header li{ float:left; display:inline; padding: 0 20px 0 20px; } header #branding{ float:left; } header #branding h1{ margin:0; } header nav{ float:right; margin-top:10px; } header .highlight, header .current a{ color:#008080; font-weight:bold; } header a:hover{ color:#cccccc; font-weight:bold; } /* Showcase **I am having trouble getting my background image to scale down when I change from mobile to desktop, would like help on that please** */ #showcase{ min-height: 350px; background: url('./images/showcase.jpg'); background-repeat: no-repeat; background-size: 100%; text-align: center; color: #000000; border-bottom:#008080 3px solid; } #showcase h1{ margin-top:100px; font-size:55px; margin-bottom:10px; } #showcase p{ font-size:20px; } /* Subscribe */ #subscribe{ padding:15px; color:#ffffff; background:#35424a; } #subscribe h1{ float:left; } #subscribe form { float:right; margin-top:15px; } #subscribe input[type="email"]{ padding:4px; height:25px; width:250px; } /* Boxes */ #boxes{ margin-top:20px; } #boxes .box{ float:left; text-align: center; width:30%; padding:10px; } #boxes .box img{ width:90px; } /* Sidebar */ aside#sidebar{ float:right; width:30%; margin-top:10px; } aside#sidebar .quote input, aside#sidebar .quote textarea{ width:90%; padding:5px; } section#main .contactForm input, section#main .contactForm textarea{ width:90%; padding:5px; } /* Main-col */ article#main-col{ float:left; width:65%; } /* Services */ ul#services li{ list-style: none; padding:20px; border: #cccccc solid 1px; margin-bottom:5px; background:#e6e6e6; } footer{ padding:20px; margin-top:20px; color:#ffffff; background-color:#008080; text-align: center; } /* Media Queries */ @media(max-width: 767px){ header #branding, header nav, header nav li, #subscribe h1, #subscribe form, #boxes .box, article#main-col, aside#sidebar{ float:none; text-align:center; width:100%; } header{ padding-bottom:20px; } #showcase h1{ margin-top:40px; } #subscribe button, .quote button{ display:block; width:100%; } #subscribe form input[type="email"], .quote input, .quote textarea{ width:100%; margin-bottom:5px; } }