.form-basic{ max-width: 640px; margin: 0 auto; padding: 55px; box-sizing: border-box; background-color: #ffffff; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); font: bold 14px sans-serif; text-align: center; } .form-basic .form-row{ text-align: left; margin-bottom: 22px; } .form-basic .form-title-row{ text-align: center; margin-bottom: 0px; } /* The form title */ .form-basic h1{ display: inline-block; box-sizing: border-box; color: #79bbe3; font-size: 24px; padding: 0 10px 15px; border-bottom: 2px solid #6caee0; margin: 0; } .form-basic .form-row > label span{ display: inline-block; box-sizing: border-box; color: #5F5F5F; width: 180px; text-align: right; vertical-align: top; padding: 12px 25px; } .form-basic input{ color: #5f5f5f; box-sizing: border-box; width: 240px; box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); padding: 12px; border: 1px solid #dbdbdb; } .form-basic textarea{ color: #5f5f5f; box-sizing: border-box; width: 240px; height: 80px; box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); font: normal 13px sans-serif; padding: 12px; border: 1px solid #dbdbdb; resize: vertical; } .form-basic button{ display: block; border-radius: 2px; background-color: #6caee0; color: #ffffff; font-weight: bold; box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); padding: 14px 22px; border: 0; margin: 40px 183px 0; cursor:pointer; } /* Making the form responsive. Remove this media query if you don't need the form to work on mobile devices. */ @media (max-width: 600px) { .form-basic{ padding: 30px; max-width: 480px; } .form-basic .form-row{ max-width: 300px; margin: 25px auto; text-align: left; } .form-basic .form-title-row{ margin-bottom: 50px; } .form-basic .form-row > label span{ display: block; text-align: left; padding: 0 0 15px; } .form-basic button{ margin: 0; cursor:pointer; } }