I have been trying to figure out how to make the contact form on my website responsive so it can be properly adjusted when checking the page on phone.
Here is the website:
https://ddahkickz.com/pages/contact-us
Password: ddah
I have little knowledge regarding this and need assistance if possible. Below you can check the code of the Shopify page. Thank you in advance for the assistance on the matter.
{{ form.errors | default_errors }}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>contact form</title>
</head>
<body>
<center>
<link href="contact-form.css" rel="stylesheet">
<center><h1 style="font-size:2vw">CONTACT US</h1></center>
<div class="fcf-body">
<div id="fcf-form">
<div class="fcf-form-group">
<label for="First Name" class="fcf-label">First Name</label>
<div class="fcf-input-group">
<input type="text" id="Name" name="Name" class="fcf-form-control" required>
</div>
</div>
<div class="fcf-form-group">
<label for="Last Name" class="fcf-label">Last Name</label>
<div class="fcf-input-group">
<input type="text" id="Name" name="Name" class="fcf-form-control" required>
</div>
</div>
<div class="fcf-form-group">
<label for="Email" class="fcf-label">Your email address</label>
<div class="fcf-input-group">
<input type="email" id="Email" name="contact[email]" class="fcf-form-control" required>
</div>
</div>
<div class="fcf-form-group">
<label for="Message" class="fcf-label">Your message</label>
<div class="fcf-input-group">
<textarea id="Message" name="contact[body]" class="fcf-form-control" rows="6" maxlength="3000" required></textarea>
</div>
</div>
<div class="fcf-form-group">
<button type="submit" id="fcf-button" class="fcf-btn fcf-btn-primary fcf-btn-lg fcf-btn-block">Send Message</button>
</div>
</form>
</center>
</div>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
<style>
#fcf-form {
display:block;
}
.fcf-body {
margin: 0;
font-family: -apple-system, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
padding: 30px;
padding-bottom: 10px;
border: 1px solid #ced4da;
border-radius: 0.25rem;
max-width: 35%;
}
.fcf-form-group {
margin-bottom: 1rem;
}
.fcf-input-group {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: stretch;
align-items: stretch;
width: 100%;
}
.fcf-form-control {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
outline: none;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.fcf-form-control:focus {
border: 1px solid #313131;
}
select.fcf-form-control[size], select.fcf-form-control[multiple] {
height: auto;
}
textarea.fcf-form-control {
font-family: -apple-system, Arial, sans-serif;
height: auto;
}
label.fcf-label {
display: inline-block;
margin-bottom: 0.5rem;
}
.fcf-credit {
padding-top: 10px;
font-size: 0.9rem;
color: #545b62;
}
.fcf-credit a {
color: #545b62;
text-decoration: underline;
}
.fcf-credit a:hover {
color: #0056b3;
text-decoration: underline;
}
.fcf-btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
#media (prefers-reduced-motion: reduce) {
.fcf-btn {
transition: none;
}
}
.fcf-btn:hover {
color: #212529;
text-decoration: none;
}
.fcf-btn:focus, .fcf-btn.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.fcf-btn-primary {
color: #fff;
background-color: #000000;
border-color: #000000;
}
.fcf-btn-primary:hover {
color: #fff;
background-color: #000000;
border-color: #000000;
}
.fcf-btn-primary:focus, .fcf-btn-primary.focus {
color: #fff;
background-color: #000000;
border-color: #000000;
box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.5);
}
.fcf-btn-lg, .fcf-btn-group-lg>.fcf-btn {
padding: 0.5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: 0.3rem;
}
.fcf-btn-block {
display: block;
width: 100%;
}
.fcf-btn-block+.fcf-btn-block {
margin-top: 0.5rem;
}
input[type="submit"].fcf-btn-block, input[type="reset"].fcf-btn-block, input[type="button"].fcf-btn-block {
width: 100%;
}
</style>
{% endform %} ```
Depending what width the form should be in mobile view, the media query is how you can make your application responsive. Here is an example of writing a media query for a small viewport. You can adjust the widths to how you want the form styled.
#media only screen and (max-width: 600px) {
.fcf-form {
max-width: //width you want the form to be;
}
}
Related
I am new to css so I cannot figure out the way of changing the color of pop up menus two buttons (Submit and Reset). Both of these are placed at the end of the pop up menu, but are not readable because of the color. I have used this code from this site and here the color of button is teal but in my code the button and text color is white and because of this I am unable to read the buttons.
I have tried changing the background color, text color in css but nothing is working
image
Current Image
Current image
I expect the button to be blue
```
.gbtn{
background: #d0d0d0;
color: #444444;
padding: 0 15px;
text-transform: uppercase;
height: 40px;
line-height: 40px;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
font-size: 12px;
}
.gbtn.btn-estimate{
padding:0 22px;
margin-top:7px;
}
.gbtn.btn-discount{
padding:0 26px;
}
.gbtn:hover{
background: #fbc443;
color: #25BCE9;
}
.gbtn:hover span{
color: #25BCE9;
}
.gbtn span{
display: inline-block;
}
button{
/* border:none;
background: #25BCE9;
color: #fff;
display: flex;
justify-content: flex-start;*/
}
#contactForm {
display: none;
z-index: 10000;
border: 3px solid #25BCE9;
padding: 2em;
width: 400px;
text-align: center;
background: #fff;
position: fixed;
top:50%;
left:50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%)
}
input{
height: 40px;
margin: .8em auto;
font-family: inherit;
text-transform: inherit;
font-size: inherit;
display: block;
width: 280px;
padding: .4em;
}
textarea {
height: 80px;
width:337px;
margin-right: 5px;
margin-bottom: 5px;
font-family: inherit;
text-transform: inherit;
font-size: inherit;
display: block;
padding: .4em;
resize: none;}
.formBtn {
display: inline-block;
background: teal;
color: #fff;
width: 140px;
font-weight: 100;
font-size: 1.2em;
padding: 5px 0;
border: none;
}
<div class="block-currency">
<div class="gbtn btn-estimate">
<div id="contact">Get Quote</div>
</div>
<div id="contactForm">
<h1>Keep in touch!</h1>
<small>We'll get back to you as quickly as possible</small>
<form action="#">
<input placeholder="Name" type="text" required />
<input placeholder="Email" type="email" required />
<input placeholder="Subject" type="text" required />
<textarea placeholder="Comment"></textarea>
<input class="formBtn" type="submit" />
<input class="formBtn" type="reset" />
</form>
</div>
</div>
Block Currency Code
.block-currency{
position:relative;
float:right;
cursor:pointer;
line-height:50px;
height:50px;
}
.block-currency:hover ul{
visibility:visible;
top:50px;
opacity:1;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
}
```
.gbtn{
background: #d0d0d0;
color: #444444;
padding: 0 15px;
text-transform: uppercase;
height: 40px;
line-height: 40px;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
font-size: 12px;
}
.gbtn.btn-estimate{
padding:0 22px;
margin-top:7px;
}
.gbtn.btn-discount{
padding:0 26px;
}
.gbtn:hover{
background: #fbc443;
color: #25BCE9;
}
.gbtn:hover span{
color: #25BCE9;
}
.gbtn span{
display: inline-block;
}
button{
/* border:none;
background: #25BCE9;
color: #fff;
display: flex;
justify-content: flex-start;*/
}
#contactForm {
z-index: 10000;
border: 3px solid #25BCE9;
padding: 2em;
width: 400px;
text-align: center;
background: #fff;
position: relative;
top:0%;
left:0%;
}
input{
height: 40px;
margin: .8em auto;
font-family: inherit;
text-transform: inherit;
font-size: inherit;
display: block;
width: 280px;
padding: .4em;
}
textarea {
height: 80px;
width:337px;
margin-right: 5px;
margin-bottom: 5px;
font-family: inherit;
text-transform: inherit;
font-size: inherit;
display: block;
padding: .4em;
resize: none;}
.formBtn {
display: inline-block;
background: teal;
color: #fff;
width: 140px;
font-weight: 100;
font-size: 1.2em;
padding: 5px 0;
border: none;
}
<div class="block-currency">
<div class="gbtn btn-estimate">
<div id="contact">Get Quote</div>
</div>
<div id="contactForm">
<h1>Keep in touch!</h1>
<small>We'll get back to you as quickly as possible</small>
<form action="#">
<input placeholder="Name" type="text" required />
<input placeholder="Email" type="email" required />
<input placeholder="Subject" type="text" required />
<textarea placeholder="Comment"></textarea>
<input class="formBtn" type="submit" />
<input class="formBtn" type="reset" />
</form>
</div>
</div>
The quickest and easiest way is to add IDs to the input elements:
<input id="submitButton"class="formBtn" type="submit" />
<input id="resetButton"class="formBtn" type="reset" />
and change their color by targeting directly:
#submitButton {
background: blue;
}
#resetButton {
background: blue;
}
I am trying to create some label text on a contact form that when the contact form is the :focus or it is :valid, the text moves above the input box and stays there.
Everything works fine on my local machine (Using brackets live preview), however, whenever I put the code onto my website for some reason the textarea label doesn't move anymore?
Has anybody got any idea why this is?
Here is the full code:
<div class="section">
<div class="wrapper">
<div class="content">
<h2>Contact Me</h2>
<form action="contactme.php" method="post" class="contact-form">
<div class="input-field">
<input type="text" name="name" required="">
<label for="">Full Name</label>
</div>
<div class="input-field">
<input type="text" name="cname" required="">
<label for="">Company Name</label>
</div>
<div class="input-field">
<input type="text" name="website" required="">
<label for="">Current Website (N/A if None)</label>
</div>
<div class="input-field">
<input type="email" name="mail" required="">
<label for="">E-Mail</label>
</div>
<div class="input-field">
<textarea name="message" rows="5" required=""></textarea>
<label for="">Message</label>
</div>
<input type="submit" name="submit" value="Submit Message" class="btn">
</form>
</div>
</div>
</div>
-
body {
margin: 0;
padding: 0;
font-family: 'Roboto Condensed', sans-serif;
width: 100%;
height: 100vh;
background: linear-gradient(to bottom, rgba(0, 142, 204, 5) 50%, rgba(253, 165, 15, 5) 50%);
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 40px;
box-sizing: border-box;
background: #FFF;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
animation: fadeIn 2s 0s linear;
}
.wrapper h2 {
color: #666;
margin: 0;
padding: 0;
text-align: center;
font-size: 30px;
text-transform: uppercase;
}
.input-field {
position: relative;
width: 100%;
margin-top: 50px;
}
.input-field input,
.input-field textarea {
font-family: 'Roboto Condensed', sans-serif;
width: 100%;
padding: 5px 0;
box-sizing: border-box;
background: transparent;
border: none;
outline: none;
border-bottom: 2px solid #666;
font-size: 16px;
color: #666;
font-weight: 700;
text-transform: uppercase;
resize: none;
}
.input-field label {
position: absolute;
top: 0;
left: 0;
padding: 5px 0;
pointer-events: none;
font-size: 16px;
color: #666;
font-weight: 700;
transition: .5s;
}
.input-field input:focus + label,
.input-field textarea:focus + label,
.input-field input:valid + label,
.input-field textarea:valid + label {
top: -25px;
font-size: 14px;
padding: 2px 5px;
background: #FF006A;
color: #FFF;
border-radius: 4px;
}
.btn {
font-family: 'Roboto Condensed', sans-serif;
margin-top: 20px;
background: linear-gradient(to right, #ff9966, #ff5e62);
color: #FFF;
padding: 15px 30px;
border: none;
outline: none;
border-radius: 30px;
font-size: 16px;
float: right;
transition: all .5s;
}
.btn:hover {
cursor: pointer;
}
#media(max-width: 580px) {
.wrapper {
width: 250px;
padding: 20px;
}
.wrapper h2 {
font-size: 15px;
}
.input-field input,
.input-field textarea {
font-size: 12px;
}
.input-field label {
font-size: 12px;
}
.btn {
font-size: 12px;
}
}
I am trying to keep the the form elements in one line and as to keep it exactly like this way for all type of resolutions i.e to keep it responsive in the same state but whenever I try to minimize the screen resolution so the form contents get messed up and the Search button goes to the second line as I do not want it to be like that..I simply want it to be in the same state i.e the Search button to stay along next to the input even when the window is minimized so how easily that would be achievable??? As I do know that it can be achieved with the use of CSS Media Queries..!
Here is the GIF :
LIVE PAGE LINK : http://huntedhunter.com/extratorrent/
Here is Code :
HTML :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="padding: 7%;margin-top: 100px;">
<h1>E<span>XTRATORRENT</span> A<span>UTOMATIC</span> D<span>OWNLOADER</span></h1>
<form>
<input class="icon" name="search" placeholder="Search Torrent Name" type="text"> <input class="btn btn-secondary" name="search" type="submit" value="Search">
</form>
</div>
<footer class="footer">
<p>Copyrighted By <strong>Hunted Hunter Solutions</strong>.A Script By <strong>Umair Shah Yousafzai</strong></p>
</footer>
</body>
</html>
CSS :
input[type=text].icon {
width: 89%;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url(searchicon.png);
background-position: 10px 13px;
background-repeat: no-repeat;
padding-left: 42px;
}
h1 {
font-family: Arial;
opacity: 0.6;
text-align: center;
}
span {
font-size: 70%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #eee2e2;
margin-left: -0.5%;
}
body {
overflow-x: hidden;
}
p {
text-align: center;
font-family: Arial;
opacity: 0.7;
}
a {
text-decoration: none;
}
.btn-secondary:hover {
color: #292b2c;
background-color: #e6e6e6;
border-color: #adadad;
cursor: pointer;
}
.btn:focus, .btn:hover {
text-decoration: none;
}
[type=reset], [type=submit], button, html [type=button] {
-webkit-appearance: button;
}
.btn-secondary {
color: #292b2c;
background-color: #fff;
border-color: #adadad;
}
.btn {
border: 1px solid turquoise;
padding: 1.2% 1.5rem;
font-size: 1rem;
border-radius: .25rem;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
You could use a flex-box for this.
Add the .flex class to your <form> tag, along with the rules:
.flex {
display:flex;
flex-wrap:nowrap;
justify-content:center;
}
replace width: 89%; with flex-grow:4; on the input[type=text].icon selector,
Finally add flex-grow:1; and margin-left:5px; to the .btn selector
input[type=text].icon {
flex-grow: 4;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url(searchicon.png);
background-position: 10px 13px;
background-repeat: no-repeat;
padding-left: 42px;
}
h1 {
font-family: Arial;
opacity: 0.6;
text-align: center;
}
span {
font-size: 70%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #eee2e2;
margin-left: -0.5%;
}
body {
overflow-x: hidden;
}
p {
text-align: center;
font-family: Arial;
opacity: 0.7;
}
a {
text-decoration: none;
}
.btn-secondary:hover {
color: #292b2c;
background-color: #e6e6e6;
border-color: #adadad;
cursor: pointer;
}
.btn:focus,
.btn:hover {
text-decoration: none;
}
[type=reset],
[type=submit],
button,
html [type=button] {
-webkit-appearance: button;
}
.btn-secondary {
color: #292b2c;
background-color: #fff;
border-color: #adadad;
}
.btn {
flex-grow: 1;
margin-left: 5px;
border: 1px solid turquoise;
padding: 1.2% 1.5rem;
font-size: 1rem;
border-radius: .25rem;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.flex {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="padding: 7%;margin-top: 100px;">
<h1>E<span>XTRATORRENT</span> A<span>UTOMATIC</span> D<span>OWNLOADER</span></h1>
<form class="flex">
<input class="icon" name="search" placeholder="Search Torrent Name" type="text" /> <input class="btn btn-secondary" name="search" type="submit" value="Search" />
</form>
</div>
<footer class="footer">
<p>Provided without garanties by a <strong>Welldoer</strong>. A Script By <strong>Lars</strong></p>
</footer>
</body>
</html>
I'm trying to create a login page in HTML.
no matter what i do, the checkbox and its text are not aliening together in a same line.
I want it to look like that: "[] text" instead of:
"[](going down a line) text".
I tried a lot of suggestions i saw in similar posts but nothing seems to works.
This is my code:
* {
box-sizing: border-box;
}
*:focus {
outline: none;
}
body {
font-family: Arial;
background-color: #3498DB;
padding: 50px;
}
.login {
margin: 20px auto;
width: 300px;
}
.login-screen {
background-color: #FFF;
padding: 20px;
border-radius: 5px
}
.app-title {
text-align: center;
color: #777;
}
.login-form {
text-align: center;
}
.control-group {
margin-bottom: 10px;
}
input {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
transition: border .5s;
}
input:focus {
border: 2px solid #3498DB;
box-shadow: none;
}
.btn {
border: 2px solid transparent;
background: #3498DB;
color: #ffffff;
font-size: 16px;
line-height: 25px;
padding: 10px 0;
text-decoration: none;
text-shadow: none;
border-radius: 3px;
box-shadow: none;
transition: 0.25s;
display: block;
width: 250px;
margin: 0 auto;
}
.btn:hover {
background-color: #2980B9;
}
.errorMsg{
font-size: 12px;
color: red;
}
.LabeledCheckboxGroup label, .LabeledCheckboxGroup input {
float: none; /* if you had floats before? otherwise inline-block will behave differently */
display: inline-block;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
<!--<script src="script/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">-->
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body>
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Gridler</h1>
</div>
<div class="login-form">
<div class="control-group">
<input type="text" class="login-field" value="" placeholder="username" id="login-name">
<label class="login-field-icon fui-user" for="login-name"></label>
<input type="checkbox" checked name ="IsHuman"> Human Player
</div>
<a class="btn btn-primary btn-large btn-block" href="#" onclick="process()">login</a>
<!--errorMsg below will later be filed with script and ajax to show a msg when a name is already exist-->
<p class="errorMsg" href="#"></p>
</div>
</div>
</div>
</body>
</html>
Thanks,
Maor
Put the checkbox and its text inside a div.
Remove the width property from the checkbox.
Move the text into its own label.
set display: inline-block for both the checkbox and the label.
* {
box-sizing: border-box;
}
*:focus {
outline: none;
}
body {
font-family: Arial;
background-color: #3498DB;
padding: 50px;
}
.login {
margin: 20px auto;
width: 300px;
}
.login-screen {
background-color: #FFF;
padding: 20px;
border-radius: 5px
}
.app-title {
text-align: center;
color: #777;
}
.login-form {
text-align: center;
}
.control-group {
margin-bottom: 10px;
}
input {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
width: auto;
padding: 10px 0;
transition: border .5s;
}
input:focus {
border: 2px solid #3498DB;
box-shadow: none;
}
.btn {
border: 2px solid transparent;
background: #3498DB;
color: #ffffff;
font-size: 16px;
line-height: 25px;
padding: 10px 0;
text-decoration: none;
text-shadow: none;
border-radius: 3px;
box-shadow: none;
transition: 0.25s;
display: block;
width: 250px;
margin: 0 auto;
}
.btn:hover {
background-color: #2980B9;
}
.errorMsg{
font-size: 12px;
color: red;
}
.LabeledCheckboxGroup label, .LabeledCheckboxGroup input {
float: none; /* if you had floats before? otherwise inline-block will behave differently */
display: inline-block;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
<!--<script src="script/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">-->
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body>
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Gridler</h1>
</div>
<div class="login-form">
<div class="control-group">
<input type="text" class="login-field" value="" placeholder="username" id="login-name">
<label class="login-field-icon fui-user" for="login-name"></label><br/>
<input type="checkbox" checked name ="IsHuman"> Human Player
</div>
<a class="btn btn-primary btn-large btn-block" href="#" onclick="process()">login</a>
<!--errorMsg below will later be filed with script and ajax to show a msg when a name is already exist-->
<p class="errorMsg" href="#"></p>
</div>
</div>
</div>
</body>
</html>
Add
input.login-field {
display: block;
margin: 0 auto;
}
You've set the width for ALL inputs to 250px simply change
input {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
transition: border .5s;
}
To
#login-name {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
transition: border .5s;
}
I have edited your code snippet, please have a look.
* {
box-sizing: border-box;
}
*:focus {
outline: none;
}
body {
font-family: Arial;
background-color: #3498DB;
padding: 50px;
}
.login {
margin: 20px auto;
width: 300px;
}
.login-screen {
background-color: #FFF;
padding: 20px;
border-radius: 5px
}
.app-title {
text-align: center;
color: #777;
}
.login-form {
text-align: center;
}
.control-group {
margin-bottom: 10px;
}
input {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
transition: border .5s;
}
input:focus {
border: 2px solid #3498DB;
box-shadow: none;
}
input[type="checkbox"]
{
width: 30px;
}
.checkbox {
text-align: left;
font-size: 14px;
margin-top: 5px;
}
.checkbox label {
vertical-align: top;
}
.btn {
border: 2px solid transparent;
background: #3498DB;
color: #ffffff;
font-size: 16px;
line-height: 25px;
padding: 10px 0;
text-decoration: none;
text-shadow: none;
border-radius: 3px;
box-shadow: none;
transition: 0.25s;
display: block;
width: 250px;
margin: 0 auto;
}
.btn:hover {
background-color: #2980B9;
}
.errorMsg{
font-size: 12px;
color: red;
}
.LabeledCheckboxGroup label, .LabeledCheckboxGroup input {
float: none; /* if you had floats before? otherwise inline-block will behave differently */
display: inline-block;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
<!--<script src="script/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">-->
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body>
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Gridler</h1>
</div>
<div class="login-form">
<div class="control-group">
<input type="text" class="login-field" value="" placeholder="username" id="login-name">
<label class="login-field-icon fui-user" for="login-name"></label>
<div class="checkbox">
<input type="checkbox" checked name ="IsHuman"> <label>Human Player</label>
</div>
</div>
<a class="btn btn-primary btn-large btn-block" href="#" onclick="process()">login</a>
<!--errorMsg below will later be filed with script and ajax to show a msg when a name is already exist-->
<p class="errorMsg" href="#"></p>
</div>
</div>
</div>
</body>
</html>
I have a problem with a contact form I'm making. There are two left floating columns with "name" and "email" in one, then "message" in the other. I want my button to be below the two columns and be centered within the form.
My problem is that, when it's less then 50%, the button sticks to the "message". Even though its parent is the form, the button wants to style itself with the "message" column.
Here is a link to my problem in jsfiddle.
Here's my HTML:
<form id="ajax-contact" method="post" action="mailer.php">
<div class="column">
<label for="name">name</label>
<input type="text" id="name" name="name" required>
<label for="email">email address</label>
<input type="email" id="email" name="email" required>
</div>
<div class="column">
<label for="message">message</label>
<textarea id="message" required></textarea>
</div>
<button id="bottom-button" type="submit">Send</button>
</form>
And my CSS:
form {
padding: 0 5% 0 5%; }
form .column {
width: 100%; }
form label {
display: block;
font-family: "Lato", sans-serif;
font-weight: 400;
color: #553445;
font-size: 1.5em;
line-height: 1em;
padding: 0 5px 5px 2px;
font-size: 1.1em;
text-transform: uppercase;
letter-spacing: 1px; }
form input, form textarea {
display: block;
font-family: "Lato", sans-serif;
font-weight: 300;
font-size: 1.5em;
line-height: 1em;
padding: 5px 10px;
color: #553445;
width: 100%;
background: rgba(85, 52, 69, 0.1);
border: none;
border-bottom: 3px solid rgba(85, 52, 69, 0.4);
outline: none; }
form input:active, form input:focus, form textarea:active, form textarea:focus {
border-bottom: 3px solid #fff; }
form input {
margin-bottom: 40px; }
form textarea {
min-height: 200px;
resize: none; }
button {
background: #e85657;
color: #fff;
padding: 0.5em;
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 1.5em;
padding-left: 1.05em;
padding-right: 1.05em;
cursor: pointer;
margin-bottom: 3em;
border-radius: 3px;
border: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
button:hover {
background: #fff;
color: #e85657; }
button:focus {
outline: none; }
button a {
color: inherit; }
#bottom-button {
width: 100%;
border-radius: 0 0 3px 3px; }
#media screen and (min-width: 30em) {
#ajax-contact .column {
float: left;
width: 50%; }
#ajax-contact textarea {
min-height: 146px; }
#ajax-contact #bottom-button {
border-radius: 3px;
width: auto; } }
Your button wasn't part of the styled div, <div class="column">.
See updated JSFiddle here: http://jsfiddle.net/b9rp3Ls4/6/
EDIT: Based on the comment, I've centered it using this resource from the W3C, available here: http://www.w3.org/Style/Examples/007/center.en.html
The new JS Fiddle: http://jsfiddle.net/b9rp3Ls4/7/
It's better to use the same parent if you're trying to center within. Use the margins to put it right in the middle.