The responsive contact form is working properly for textarea but not for input type=text fields on smaller screens. I tried adding media queries.
Here is my code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.contact-form {
line-height: 1.4;
width: 50%;
margin: 0 auto;
}
.form-group {
background: #F6DDCE;
margin-bottom: 1em;
padding: 10px;
}
.form-group ul {
list-style: none;
margin: 0 0 2em;
padding: 0;
}
.form-group li {
margin-bottom: 0.5em;
}
.form-group h3 {
margin-bottom: 1em;
}
.form-fields input[type="text"],
.form-fields input[type="email"]{
box-sizing: border-box;
padding: 0.6em 0.8em;
color: #999;
background: #f7f7f7;
border: 1px solid #e1e1e1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.9em;
text-decoration: none;
line-height: normal;
max-height: 3em;
}
.form-fields input[type="text"]:focus,
.form-fields input[type="email"]:focus,
.form-fields textarea:focus {
color: #333;
border: 1px solid #C17CCF;
outline: none;
background: #f2f2f2;
}
.form-fields textarea {
display: block;
box-sizing: border-box;
font: 0.9em Lato, Helvetica, sans-serif;
width: 100%;
height: 6em;
overflow: auto;
padding: 0.6em 0.8em;
color: #999;
background: #f7f7f7;
border: 1px solid #e1e1e1;
line-height: normal;
}
.form-fields label{
text-align: left;
}
.send-btn {
border-radius: 0px 2px 2px 0px;
box-sizing: content-box;
background: #8B798C;
font-weight: 300;
text-transform: uppercase;
color: white;
padding: 0.35em 0.75em;
border: none;
font-size: 1.1em;
text-decoration: none;
cursor: pointer;
}
.send-btn:hover, .send-btn:focus {
background: #C17CCF;
}
/*flex it*/
.send-form {
display: flex;
flex-wrap: wrap;
}
.form-group {
flex: 1 0 300px;
}
.form-submit {
flex: 0 0 100%;
}
.form-fields li {
display: flex;
flex-wrap: wrap;
}
.form-fields input[type="text"],
.form-fields input[type="email"]{
flex: 1 0 230px;
}
.form-fields label {
flex: 1 0 90px;
}
/* Adding media queries*/
#media (max-width: 400px) {
body {
width: 100%;
margin: 0;
padding: 0 0 2em;
}
header, .form-submit {
padding: 2% 5%;
}
}
</style>
</head>
<body>
<header>
</header>
<form class="contact-form">
<section class="form-group">
<h3>Contact Us</h3>
<ul class="form-fields">
<li><label for="name">Name:</label> <input type="text" name="name" id="name" placeholder="your full name" class="text-input"></li>
<li><label for="subject">Subject:</label> <input type="text" name="subject" id="subject" placeholder="subject" class="text-input"></li>
<li><label for="email">Email:</label> <input type="email" name="email" id="email" placeholder="confirmation email" class="text-input"></li>
<li><label for="comments">Comments:</label><textarea id="comments" name="comments" class="text-area">comments</textarea> </li>
</ul>
</section>
<section class="form-submit">
<button type="submit" class="send-btn">Send</button>
</section>
</form>
</body>
</html>
It's because of the flex property flex: 1 0 230px; for input fields. Override it with max-width: 100%; in media query breakpoints.
Here's the fiddle:
.form-fields input[type="text"],
.form-fields input[type="email"] {
max-width: 100%;
}
Related
I have edited the style of an embedded Mailchimp form for my WP website. However, when I apply the changes to my website's footer.php and style.css, the form looks completely unstyled:
Here's a fiddle in which you can see the style of the form I aim to apply.
You can also see the code here:
/* Changes the style of the overall form */
#mc_embed_signup {
background: #c2cdc8;
color: #000000;
padding: 45px;
text-align: center;
}
/* Styles the header text above the inputs */
#inscripcion {
font-size: 18px;
font: Poppins, sans-serif;
margin: 0 0 20px;
color: #000000;
text-align: center;
}
#mc_embed_signup form {
text-align: center;
padding: 10px 0 10px 0;
}
.mc-field-group {
display: inline-block;
}
/* positions input field horizontally */
#mc_embed_signup input.email {
font-family: Poppins, sans-serif;
border: none;
padding: 15px;
width: 50%;
font-size: 16px;
margin-right: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 5px;
color: #343434;
background-color: #fff;
box-sizing: border-box;
display: inline-block;
}
#mc_embed_signup input.email:focus {
outline-color: #FAE105;
}
#mc_embed_signup label {
display: none;
font-size: 16px;
padding-bottom: 10px;
font-weight: bold;
}
#mc_embed_signup .clear {
display: inline-block;
}
#mc_embed_signup .button {
background-color: #224b37;
color: #ffffff;
font-weight: bold;
margin: 0 auto;
border: none;
padding: 15px 30px;
border-radius: 5px;
letter-spacing: 1px;
font-size: 16px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
cursor: pointer;
box-sizing: border-box;
display: inline-block;
margin-left: 2px;
transition: all 0.23s ease-in-out 0s;
}
#mc_embed_signup .button:hover {
cursor: pointer;
}
#mc_embed_signup div#mce-responses {
float: left;
top: -1.4em;
padding: 0em .5em 0em .5em;
overflow: hidden;
width: 90%;
margin: 0 5%;
clear: both;
}
#mc_embed_signup div.response {
margin: 1em 0;
padding: 1em .5em .5em 0;
font-weight: bold;
float: left;
top: -1.5em;
z-index: 1;
width: 80%;
}
#mc_embed_signup #mce-error-response {
display: none;
}
#mc_embed_signup #mce-success-response {
color: #529214;
display: none;
}
#mc_embed_signup label.error {
display: block;
float: none;
width: auto;
margin-left: 1.05em;
text-align: left;
padding: .5em 0;
}
#media (max-width: 768px) {
#mc_embed_signup input.email {
width: 100%;
margin-bottom: 5px;
}
#mc_embed_signup .clear {
display: block;
width: 100%;
}
#mc_embed_signup .button {
width: 100%;
margin: 0;
}
}
<div id="mc_embed_signup">
<form action="https://imthemoisturizer.us19.list-manage.com/subscribe/post?u=13cc95dc908756ea974c0f4fb&id=78f2b1b6c1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div id="inscripcion">¿Quieres recibir todos mis posts? ⦙ Do you want to receive my posts?</div>
<input type="email" value="" "style=background:#FFFFFF;" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_13cc95dc908756ea974c0f4fb_78f2b1b6c1" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="OK!" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
What's wrong with this code? Something must be blocking all styles, but I can't see what.
Thanks a lot in advance.
For some reason, if I included the HTML on footer.php and the CSS on style.css, the styles didn't properly load and the form had an awful appearance.
Perhaps this isn't a neat or clean solution, but it works and now my Mailchimp form is properly styled. I simply included the styles right at the beginning of the div for the form and now they appear smoothly. I did it with this code, included on footer.php:
<!-- Begin Mailchimp Signup Form -->
<div id="mc_embed_signup">
<style>
/* Changes the style of the overall form */
#mc_embed_signup {
background: #c2cdc8;
color: #000000;
padding: 45px;
text-align: center;
}
/* Styles the header text above the inputs */
#inscripcion {
font-size: 16px;
font: Poppins,sans-serif;
font-weight: 600;
margin: 0 0 20px;
color: #000000;
text-align: center;
}
#mc_embed_signup form {
text-align: center;
padding: 10px 0 10px 0;
}
.mc-field-group {
display: inline-block;
} /* positions input field horizontally */
#mc_embed_signup input.email {
font-family: Poppins,sans-serif;
border: none;
padding: 15px;
width: 50%;
font-size: 14px;
margin-right: 5px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 5px;
color: #343434;
background-color: #fff;
box-sizing: border-box;
display: inline-block;
}
#mc_embed_signup input.email:focus {
outline-color: #FAE105;
}
#mc_embed_signup label {
display: none;
font-size: 16px;
padding-bottom: 10px;
font-weight: bold;
}
#mc_embed_signup .clear {
display: inline-block;
}
#mc_embed_signup .button {
background-color: #224b37;
color: #ffffff;
font: Poppins, sans-serif;
font-weight: bold;
margin: 0 auto;
border: none;
padding: 0 30px;
border-radius: 5px;
letter-spacing: 1px;
font-size: 14px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
cursor: pointer;
box-sizing: border-box;
display: inline-block;
margin-left: 2px;
transition: all 0.23s ease-in-out 0s;
}
#mc_embed_signup .button:hover {
cursor: pointer;
}
#mc_embed_signup div#mce-responses {
float: left;
top: -1.4em;
padding: 0em .5em 0em .5em;
overflow: hidden;
width: 90%;
margin: 0 5%;
clear: both;
}
#mc_embed_signup div.response {
margin: 1em 0;
padding: 1em .5em .5em 0;
font-weight: bold;
float: left;
top: -1.5em;
z-index: 1;
width: 80%;
}
#mc_embed_signup #mce-error-response {
display: none;
}
#mc_embed_signup #mce-success-response {
color: #529214;
display: none;
}
#mc_embed_signup label.error {
display: block;
float: none;
width: auto;
margin-left: 1.05em;
text-align: left;
padding: .5em 0;
}
#media (max-width: 768px) {
#mc_embed_signup input.email {
width: 100%;
margin-bottom: 5px;
}
#mc_embed_signup .clear {
display: block;
width: 100%;
}
#mc_embed_signup .button {
width: 100%;
margin: 0;
}
}
</style>
<form action="HERE GOES THE LINK TO YOUR MAILCHIMP FORM" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div id="inscripcion">¿Quieres recibir todos mis posts? ⦙ Do you want to receive my posts?</div>
<input type="email" value="" "style=background:#FFFFFF;" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_13cc95dc908756ea974c0f4fb_78f2b1b6c1" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="OK!" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
Change it so that it adapts to your needs and preferences and it should work, although I can't guarantee that it's a clean solution.
Sorry I am very very new to CSS
I am trying to align "Low" under "Work", but no luck. Could anyone suggest me. Please refer screenshot.enter image description here
.contact-form {
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
max-width: 600px;
font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif;
font-size: 20px;
}
.contact-form label {
display: block;
margin: 0px 0px 15px 0px;
text-transform: uppercase; /* New */
}
.contact-form label > span {
padding-top: 8px;
}
.contact-form label > span, #recaptcha::before {
width: 100px;
text-align: right;
float: left;
padding-right: 20px;
content: "";
}
.contact-form input, .contact-form textarea {
margin-bottom: 15px;
padding: 10px;
border: none;
}
.contact-form input.input-field {
width: 70%;
height: 20px;
font-size: 18px;
}
.contact-form .textarea-field {
height: 250px;
margin-bottom: 11px;
}
.contact-form .textarea-field, .g-recaptcha {
width: 70%;
font-size: 18px;
display: inline-block;
}
.g-recaptcha {
height: 78px !important;
}
#recaptcha {
display: block;
margin: 0px 0px 24px 0px;
}
textarea {
resize: none;
}
textarea:focus, input:focus {
outline: 0;
}
input.submit-button {
background-image: url("../img/submit-button.jpg");
width: 225px;
height: 60px;
border: none;
}
.appraisals .section-title {
width: 100%;
}
#appraisals-form {
width: 100%;
max-width: 700px;
top: auto;
transform: none;
}
#appraisals-form label > span {
width: 150px;
font-size: 16px
}
#appraisals-form span.label-sm {
display: block;
font-size: 14px;
text-transform: none;
}
#appraisals-form input, #appraisals-form textarea {
background-color: #d7d7d7;
}
#appraisals-form textarea {
height: 100px;
}
#appraisals-form .centred-button {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="appraisals-form" class="contact-form">
<form role="form" method="post" action="contact-form.php">
<label for="name"><span>Name</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /></label>
<label for="name"><span>Type of Artwork</span><span class="label-sm">(i.e. sculpture, painting...)</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your item's type of artwork." /></label>
<label for="message"><span>Message</span><textarea name="message" class="textarea-field" required data-errormessage-value-missing="Please enter your message."></textarea></label>
<div class="centred-button"><input type="submit" value="submit" class="submit-button" /></div>
</form>
</div>
</body>
</html>
I'm trying to change my sign-up page so that the avatar is to the left and the username, password boxes etc are to the right. I've tried using split divs but this doesn't seem to work. I've also tried positioning the avatar to the left but that also hasn't worked. Here is my style and body code.
body {
font-family: Arial, Helvetica, sans-serif;
}
form {
border: 3px solid #f1f1f1;
}
* {
margin: 0;
padding: 0;
}
#logo {
float: left;
display: inline-block;
object-fit: none;
background: transparent;
padding-bottom: 0;
padding-top: 0;
padding-left: 10px;
}
.navbar {
overflow: hidden;
background-color: #D47ACE;
position: fixed;
top: 0;
width: 100%;
z-index: 1001;
}
.navbar-logo {
font-size: 25px;
word-spacing: 0px;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 23px;
font-style: normal;
font-family: "Rockwell", Monaco, monospace;
letter-spacing: 0px;
word-spacing: 5px;
font-weight: 700;
}
#nav li {
display: inline;
padding-right: 30px;
}
.navbar a:hover {
color: #ffffff;
}
#demoFont {
font-family: "Lucida Console", Monaco, monospace;
font-size: 29px;
letter-spacing: 5.2px;
word-spacing: 2px;
color: #000000;
font-weight: 700;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: uppercase;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: pink;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
padding-top: 10vh;
padding-bottom: 0vh;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
.button {
background-color: pink;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<form action="/action_page.php" method="post">
<div class="imgcontainer">
<img src="https://via.placeholder.com/568" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Enter</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
Any help would be great.
You can use display: flex; property as shown in the below sample.
body {
font-family: Arial, Helvetica, sans-serif;
}
form {
border: 3px solid #f1f1f1;
}
* {
margin: 0;
padding: 0;
}
.d-flex{
display: flex;
flex-wrap: wrap;
align-items: center;
}
.img-container, .input-container {
width: 50%;
}
.img-container {
text-align: center;
}
#logo {
display: inline-block;
object-fit: none;
background: transparent;
padding-bottom: 0;
padding-top: 0;
padding-left: 10px;
}
.navbar {
overflow: hidden;
background-color: #D47ACE;
position: fixed;
top: 0;
width: 100%;
z-index: 1001;
}
.navbar-logo {
font-size: 25px;
word-spacing: 0px;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 23px;
font-style: normal;
font-family: "Rockwell", Monaco, monospace;
letter-spacing: 0px;
word-spacing: 5px;
font-weight: 700;
}
#nav li {
display: inline;
padding-right: 30px;
}
.navbar a:hover {
color: #ffffff;
}
#demoFont {
font-family: "Lucida Console", Monaco, monospace;
font-size: 29px;
letter-spacing: 5.2px;
word-spacing: 2px;
color: #000000;
font-weight: 700;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: uppercase;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: pink;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
padding-top: 10vh;
padding-bottom: 0vh;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
.button {
background-color: pink;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<form action="/action_page.php" method="post" class="d-flex">
<div class="img-container">
<img src="https://via.placeholder.com/140x100" alt="Avatar" class="avatar">
</div>
<div class="input-container">
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Enter</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</div>
</form>
One thing you can do is add a display: flex on the form, setting its contents to wrap when there is no more available space on the line. Then you can set a width of 100% on the last .container which is housing the cancel button and forgotten password link, forcing it to a new line.
Here is that new CSS:
form {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.imgcontainer .avatar {
padding-top: 0;
}
/* .imgcontainer+.container means the .container adjacent to `.imgcontainer */
.imgcontainer,
.imgcontainer+.container {
flex: 1;
}
/* .container+.container means the last .container in your case */
.container+.container {
width: 100%;
}
Which produces:
Demo
form {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.imgcontainer,
.imgcontainer+.container {
flex: 1;
}
.imgcontainer .avatar {
padding-top: 0;
}
.container+.container {
width: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
form {
border: 3px solid #f1f1f1;
}
* {
margin: 0;
padding: 0;
}
#logo {
float: left;
display: inline-block;
object-fit: none;
background: transparent;
padding-bottom: 0;
padding-top: 0;
padding-left: 10px;
}
.navbar {
overflow: hidden;
background-color: #D47ACE;
position: fixed;
top: 0;
width: 100%;
z-index: 1001;
}
.navbar-logo {
font-size: 25px;
word-spacing: 0px;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 23px;
font-style: normal;
font-family: "Rockwell", Monaco, monospace;
letter-spacing: 0px;
word-spacing: 5px;
font-weight: 700;
}
#nav li {
display: inline;
padding-right: 30px;
}
.navbar a:hover {
color: #ffffff;
}
#demoFont {
font-family: "Lucida Console", Monaco, monospace;
font-size: 29px;
letter-spacing: 5.2px;
word-spacing: 2px;
color: #000000;
font-weight: 700;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: uppercase;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: pink;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
padding-top: 10vh;
padding-bottom: 0vh;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
.button {
background-color: pink;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<form action="/action_page.php" method="post">
<div class="imgcontainer">
<img src="https://via.placeholder.com/568" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Enter</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
I can not figure out why ease-in and -out does not work for the contact form. it works for the header but not the contact form. My contact form is in a div called contact-form. stackoverflow is saying that i need add more details but i am not sure what to write so i am just going to write some random stuff. please help thank you
This is the html code
<div class="contact-form">
<form id="contact-form" method="post" actipn="">
<input name="name" type="text" class= "form-control" placeholder="Your Name" required><br><br>
<input name="email" type="text" class= "form-control" placeholder="Your Email" required><br><br>
<textarea name="message" class="form-control" cols="20" rows="6" placeholder="Message"></textarea><br><br>
<input type="submit" class="submit" value="SEND MESSAGE">
</form>
</div>
This is the css code
header{
font-size: 40px;
font-family: sans-serif;
color: white;
position: absolute;
text-align: center;
top:20%;
display: inline;
transition: all 1s ease-in-out;
}
.contact-form{
position: absolute;
top: 40%;
transition: all 1s ease-in-out;
}
.form-control{
width: 500px;
background: transparent;
border: none;
outline: none;
border-bottom: 1px solid blueviolet;
color: blueviolet;
font-size: 18px;
}
input{
height: 45px;
}
.submit{
position: relative;
background-color: blueviolet;
font-size: 20px;
position: relative;
letter-spacing: 2px;
border: none;
width: auto;
}
.submit:hover{
background-color: white;
cursor: pointer;
}
/* defaults */
html,
body {
height: 100%;
}
html {
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 24px;
}
*,
*:before,
*:after {
-moz-box-sizing: inherit;
box-sizing: inherit;
}
body {
margin: 0;
line-height: 1.5;
background-color: #e7e7e7;
font-family: Roboto, Helvectica, Arial, sans-serif;
color: #333;
}
/* headers */
h1 {
font-family: "Roboto Slab", Times, "Times New Roman", serif;
font-size: 2em;
}
/* form elements */
label {
display: block;
}
select,
textarea,
input {
max-width: 100%;
padding: 0;
margin: 0;
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
}
input[type=submit] {
border: none;
cursor: pointer;
}
/* vertical align snippet */
.va-cont {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}
.va-inn {
display: table-cell;
vertical-align: middle;
}
/* styles */
.form-container {
width: 80%;
padding: 10px;
margin: auto;
}
.form-heading {
margin-top: 0;
margin-bottom: 1.2em;
text-align: center;
}
.form-heading-highlight {
color: #009688;
}
.form-row {
position: relative;
margin-top: 30px;
}
.form-label {
position: absolute;
top: 17px;
left: 20px;
color: #999;
cursor: text;
transition: all 1s ease-in-out;
}
.form-textbox,
.form-submit {
width: 100%;
padding: 20px;
}
.form-textbox {
box-shadow: inset 0 0 10px rgba(0,0,0,.1);
}
.form-textbox:focus ~ .form-label,
.form-textbox:valid ~ .form-label {
top: -1.5em;
left: 0;
font-size: .8em;
color: inherit;
cursor: pointer;
}
.form-submit {
background-color: #009688;
font-weight: 700;
color: #fff;
transition: opacity .15s ease-in-out 0s;
}
.form-submit:hover {
opacity: .75;
}
/* media queries */
#media only screen and (max-width:1366px) {
.form-container {
width: 70%;
}
}
#media only screen and (max-width:1024px) {
body {
font-size: .85em;
}
.form-container {
width: 80%;
}
}
#media only screen and (max-width:768px) {
body {
font-size: .7em;
}
.form-container {
width: 90%;
}
}
#media only screen and (max-width:480px) {
.form-container {
width: 100%;
}
}
<div class="va-cont">
<div class="va-inn">
<form onsubmit="" class="form-container">
<h1 class="form-heading">
<span class="form-heading-highlight">CSS transitions</span><br>Form label placeholders
</h1>
<div class="form-row">
<input type="text" id="form-email" class="form-textbox" required>
<label for="form-email" class="form-label">Email address</label>
</div>
<div class="form-row">
<input type="password" id="form-password" class="form-textbox" required>
<label for="form-password" class="form-label">Password</label>
</div>
<div class="form-row">
<input type="submit" value="Let's go!" class="form-submit">
</div>
</form>
</div>
</div>
You are looking for this kind of transition ?
I am trying to keep my content centered when I decrease my browser width (or use a mobile device such as an iPhone.
Everything is centered until about a max-width of 560px, at which point anything less than 560px covers up the right hand side of the page.
I have margin: 0 auto for my main groups within the body, and I thought that would always keep content centered.
Here is my JSFiddle for compactness
Here is a picture of what the page looks like on an iPhone 6.
HTML:
<body>
<div class="header">
<p>TWIN CAT AUDIO</p>
</div>
<div class="container">
<p class="center">Sign up for updates!</p>
<!--SIGN UP -->
<form method="post" name="signup" id="signup" class="center" >
<input type="text" name="first-name" id="first-name" placeholder="First name" class="all-input-text" />
<br />
<input type="text" name="last-name" id="last-name" placeholder="Last name" class="all-input-text"/>
<br />
<input type="email" name="email" id="email" placeholder="Email address" class="all-input-text" />
<br />
<input type="password" name="password" id="password" class="all-input-text" placeholder="Password" />
<br />
<input type="password" name="pass-confirm" id="pass-confirm" class="all-input-text" placeholder="Confirm password" />
<br />
<input type="submit" name="submit" id="signup-btn" value="SIGN UP" />
</form>
<div class="error-message center"></div>
<p class="redirect center">Already have an account? Log in </p>
</div>
<script src="../Bootstrap/js/bootstrap.min.js"></script>
CSS:
html, body {
font-family: "Dosis", "Open Sans", sans-serif;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
color: #333;
}
.container {
margin: 0 auto;
max-width: 600px;
max-height: 100%;
padding: 0 15px 0 15px;
border: none;
}
.header {
color: #4F94CD;
padding-bottom: 10px;
text-align: center;
font-size: 4.5em;
width: 100%;
height: 100px;
background-color: white;
margin-bottom: 40px;
border-bottom: thin lightGrey solid;
display: block;
white-space: nowrap;
}
.container > p {
font-size: 2em;
margin-bottom: 20px;
color: #4F94CD;
}
a.no-link-style:link, a.no-link-style:visited, a.no-link-style:hover {
color: #4F94CD;
text-decoration: none;
}
a.no-link-style:hover{
font-weight: bold;
}
.center {
text-align: center;
}
form {
max-width: 800px;
margin: 0 auto;
}
.all-input-text {
margin-bottom: 12px;
border: 1px solid #ccc;
border-radius: 1px;
padding: 3px;
font-size: 1.2em;
width: 426px;
height: 45px;
color: #555;
font-family: 'Dosis', sans-serif;
}
/*Removes the yellow background color when Chrome autofills*/
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
-webkit-text-fill-color: #777;
}
input::-webkit-input-placeholder {
color: #bbb;
}
input:-moz-placeholder {
color: #777;
}
input::-moz-placeholder {
color: #777;
}
input:-ms-input-placeholder {
color: #bbb;
}
input:focus::-webkit-input-placeholder {
color: #ddd;
}
input:focus::-moz-placeholder {
color: #aaa;
}
input[type="submit"] {
border-radius: 20px;
border: none;
width: 430px;
height: 35px;
font-size: 1.2em;
color: white;
margin-top: 5px;
margin-bottom: 20px;
background-color: #4F94CD;
font-family: 'Dosis', sans-serif;
}
input[type="submit"]:hover {
background-color: #7EC0EE;
}
.error-message {
display: none;
margin: 0 auto;
padding: 6px;
margin-top: 30px;
max-width: 300px;
background-color: #333;
color: white;
font-size: 20px;
border-radius: 8px;
}
p.redirect {
font-size: 1.2em;
color: #333;
}
p.redirect a {
color: #4F94CD;
font-weight: bold;
text-decoration: none;
}
p.redirect a:hover {
color: #82b0d6;
}
#media (max-width: 670px) {
.header {
font-size: 2.7em;
height: 60px;
margin-bottom: 20px;
}
.container > p {
font-size: 1.5em;
margin-bottom: 15px;
}
form {
max-width: 80%;
}
}
It does not align to right, it has horizontal scroll because width of input field is in px, make it in %
#media (max-width: 670px) {
.header {
font-size: 2.7em;
height: 60px;
margin-bottom: 20px;
}
.container > p {
font-size: 1.5em;
margin-bottom: 15px;
}
form,input {
max-width: 80%;
}
}
See updated: https://jsfiddle.net/ku9wsne8/2/
It's because some elements have widths specifically declared.
Add this to your media query and it should solve your problem;
.all-input-text,
input[type="submit"] {
width: 100%;
}
Updated fiddle: https://jsfiddle.net/ku9wsne8/3/