html { height: 100%; } body { background-color: gold; font-family: sans-serif; text-align: center; } #contact, #formresponse { text-align: center; margin: 20px auto 20px auto; } table.data { border: 1px solid black; text-align: center; margin: 20px auto 20px auto; border-collapse: collapse; } table.data th, td { border: 1px solid black; } #canvas { width: 400px; height: 400px; margin: 20px auto 20px auto; } .contactForm { width: 100%; text-align: center; } input, textarea, select, button { font-size: 16px; font-family: inherit; padding: 0.25em 0.5em; background-color: #fff; border: 2px solid darkgrey; border-radius: 4px; } input, textarea, select { display: block; width: 50%; margin: 5px auto 5px auto; } @media screen and (min-width: 800px) { input, textarea, select { width: 25%; } #canvas { width: 700px; height: 500px; } } @media screen and (min-width: 1200px) { input, textarea, select { width: 15%; } #canvas { width: 1000px; height: 750px; } }