I'm trying to set an (mailchimp) email-signup-form and all form elements should have full width. I need to set all the styling inside the html code (external css file is not possible).
I'm trying to get all elements to full width, but for any reason the select element and my button do not have full width (but "nearly" full width). Can someone explain the reason or even show a solution on how to get these elements to the same size as the rest?
Thanks!
(Some parts of the form are in german.)
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" action="" method="post" name="mc-embedded-subscribe-form" target="_blank">
<div id="mc_embed_signup_scroll">
<div class="mc-field-group"><label for="mce-EMAIL"><h1>Email</h1></label>
<input id="mce-EMAIL" class="required email" style="width: 100%; padding: 0.5em 0.2em; margin-top: 0.5em; margin-bottom: 1.5em; line-height: 1.5em; border: 1px solid #606060; box-shadow: none; background: #ffffff;" type="email" name="EMAIL" value="" /></div>
<p><div class="mc-field-group"><label for="mce-SALUTATION"><h1>Anrede</h1></label>
<select id="mce-SALUTATION" style="width: 100%; padding: 0.5em 0.2em; margin-top: 0.5em; margin-bottom: 1.5em; line-height: 1.5em; border: 1px solid #606060; box-shadow: none; background: #ffffff;" name="SALUTATION">
<option value=""></option>
<option value="Frau">Mrs.</option>
<option value="Herr">Mr.</option>
</select></div>
<p><div class="mc-field-group"><label for="mce-FNAME"><h1>Vorname</h1> </label>
<input id="mce-FNAME" type="text" style="width: 100%; padding: 0.5em 0.2em; margin-top: 0.5em; margin-bottom: 1.5em; line-height: 1.5em; border: 1px solid #606060; box-shadow: none;" name="FNAME" value="" /></div>
<div id="mce-responses" class="clear"> </div>
<!-- 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;"><input tabindex="-1" type="text" name="b_8f44437b2b26a07918f0d32dd_afef57f14e" value="" /></div>
<div><input id="mc-embedded-subscribe" class="button" style="width: 100%; padding: 0.5em 0.2em; margin-top: 1.05em; margin-bottom: 1.5em; line-height: 1.5em; border: 1px solid #606060; shadow: none; background: #790000; color: #ffffff;" type="submit" name="subscribe" value="Jetzt Anmelden" /></div>
</div>
</form></div>
<!--End mc_embed_signup-->
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" action="" method="post" name="mc-embedded-subscribe-form" target="_blank">
<div id="mc_embed_signup_scroll">
<div class="mc-field-group"><label for="mce-EMAIL"><h1>Email</h1></label>
<input id="mce-EMAIL" class="required email" style="width: 100%; padding: 0.5em 0.2em; margin-top: 0.5em; margin-bottom: 1.5em; line-height: 1.5em; border: 1px solid #606060; box-shadow: none; background: #ffffff;box-sizing:border-box" type="email" name="EMAIL" value="" /></div>
<p><div class="mc-field-group"><label for="mce-SALUTATION"><h1>Anrede</h1></label>
<select id="mce-SALUTATION" style="width: 100%; padding: 0.5em 0.2em; margin-top: 0.5em; margin-bottom: 1.5em; line-height: 1.5em; border: 1px solid #606060; box-shadow: none; background: #ffffff;box-sizing:border-box" name="SALUTATION">
<option value=""></option>
<option value="Frau">Mrs.</option>
<option value="Herr">Mr.</option>
</select></div>
<p><div class="mc-field-group"><label for="mce-FNAME"><h1>Vorname</h1> </label>
<input id="mce-FNAME" type="text" style="width: 100%; padding: 0.5em 0.2em; margin-top: 0.5em; margin-bottom: 1.5em; line-height: 1.5em; border: 1px solid #606060; box-shadow: none;box-sizing:border-box" name="FNAME" value="" /></div>
<div id="mce-responses" class="clear"> </div>
<!-- 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;"><input tabindex="-1" type="text" name="b_8f44437b2b26a07918f0d32dd_afef57f14e" value="" /></div>
<div><input id="mc-embedded-subscribe" class="button" style="width: 100%; padding: 0.5em 0.2em; margin-top: 1.05em; margin-bottom: 1.5em; line-height: 1.5em; border: 1px solid #606060; shadow: none; background: #790000; color: #ffffff;box-sizing:border-box" type="submit" name="subscribe" value="Jetzt Anmelden" /></div>
</div>
</form></div>
<!--End mc_embed_signup-->
Related
I have to make a website homework and I have a problem with positioning a text input and a text area above each other next to a bigger radio box.
I've seen a similar post on stack overflow but my problem wasn't solved with that.I'd need something like this: https://i.stack.imgur.com/MUApR.png
.szavazas {
margin-left: 5%;
margin-top: 3%;
}
.raddio {
float: left;
width: 200px;
margin-bottom: 5%;
color: white;
background: green;
border-radius: 8px;
border: 1px solid #003300;
text-align: left;
box-shadow: 0 0 2px 1px black;
height: 350px;
}
input[type="radio"] {
text-align: left;
margin-top: 10px;
margin-bottom: 10px;
}
.velemeny {
float: left;
box-shadow: 0 0 2px 1px black;
width: 200px;
height: 175px;
}
.textin {
float: left;
border: 1px solid black;
background-color: #003300;
color: white;
width: 200px;
height: 165px;
}
<div class="szavazas">
<form class="raddio" action="/action_page.php">
<input type="radio" name="noveny" value="Nagy Flamingóvirág">Nagy Flamingóvirág<br>
<input type="radio" name="noveny" value="Gerbera">Gerbera<br>
<input type="radio" name="noveny" value="Szobai Futóka">Szobai Futóka<br>
<input type="radio" name="noveny" value="Rákvirág">Rákvirág<br>
<input type="radio" name="noveny" value="Zöldike">Zöldike<br>
<input type="radio" name="noveny" value="Borostyán">Borostyán<br>
<input type="radio" name="noveny" value="Azálea">Azálea<br>
<input type="radio" name="noveny" value="Anyósnyelv">Anyósnyelv<br>
<input type="radio" name="noveny" value="Tarka Sárkányfa">Tarka Sárkányfa<br>
<input type="radio" name="noveny" value="Filodendron">Filodendron<br>
</form>
<textarea class="velemeny" rows="7" cols="40" placeholder="Irja le a véleményét a növényről/virágról és hogy találkozott-e már vele? "></textarea>
<form class="textin" action="/action_page.php">
Itt lesz valami hosszu szoveg amit ide fogok irni <br>
<input type="text" name="masiknoveny">
</form>
</div>
You can use flexproperty to align them the way you want. It is a very strong css property and can be used to create any layout you need.
the code below should help you to understand and get started with it.
More about flex : https://codepen.io/enxaneta/full/adLPwv/
.layout {
display: flex;
}
.right-side {
display: flex;
flex-direction: column;
}
.szavazas {
margin-left: 5%;
margin-top: 3%;
}
.raddio {
float: left;
width: 200px;
margin-bottom: 5%;
color: white;
background: green;
border-radius: 8px;
border: 1px solid #003300;
text-align: left;
box-shadow: 0 0 2px 1px black;
height: 350px;
}
input[type="radio"] {
text-align: left;
margin-top: 10px;
margin-bottom: 10px;
}
.velemeny {
float: left;
box-shadow: 0 0 2px 1px black;
width: 200px;
height: 175px;
}
.textin {
float: left;
border: 1px solid black;
background-color: #003300;
color: white;
width: 200px;
height: 165px;
}
<div class="layout">
<div class="left-side">
<form class="raddio" action="/action_page.php">
<input type="radio" name="noveny" value="Nagy Flamingóvirág">Nagy Flamingóvirág<br>
<input type="radio" name="noveny" value="Gerbera">Gerbera<br>
<input type="radio" name="noveny" value="Szobai Futóka">Szobai Futóka<br>
<input type="radio" name="noveny" value="Rákvirág">Rákvirág<br>
<input type="radio" name="noveny" value="Zöldike">Zöldike<br>
<input type="radio" name="noveny" value="Borostyán">Borostyán<br>
<input type="radio" name="noveny" value="Azálea">Azálea<br>
<input type="radio" name="noveny" value="Anyósnyelv">Anyósnyelv<br>
<input type="radio" name="noveny" value="Tarka Sárkányfa">Tarka Sárkányfa<br>
<input type="radio" name="noveny" value="Filodendron">Filodendron<br>
</form>
</div>
<div class="right-side">
<textarea class="velemeny" rows="7" cols="40" placeholder="Irja le a véleményét a növényről/virágról és hogy találkozott-e már vele? "></textarea>
<form class="textin" action="/action_page.php">
Itt lesz valami hosszu szoveg amit ide fogok irni <br>
<input type="text" name="masiknoveny">
</form>
</div>
</div>
I have made some change to your code and achieved the bellow result. Hope this is what you want.
.raddio, .right-side {
float: left;
width: 300px;
margin-bottom: 5%;
color: white;
background: green;
border-radius: 8px;
border: 1px solid #003300;
text-align: left;
box-shadow: 0 0 2px 1px black;
height: 350px;
}
.right-side{
width: 205px;
margin-left: 15px;
border-width:0;
background: transparent;
box-shadow: none;
}
input[type="radio"] {
text-align: left;
margin-top: 10px;
margin-bottom: 10px;
}
.velemeny {
/* float: left; */
box-shadow: 0 0 2px 1px black;
width: 200px;
height: 175px;
border-radius: 8px;
box-sizing: border-box;
margin-bottom: 15px;
}
.textin {
/* float: left; */
border: 1px solid black;
background-color: #003300;
color: white;
width: 200px;
height: 160px;
border-radius: 8px;
padding: 10px;
box-sizing: border-box;
box-shadow: 0 0 2px 1px black;
}
<div class="layout">
<form class="" action="/action_page.php">
<div class="left-side raddio">
<input type="radio" name="noveny" value="Nagy Flamingóvirág">Nagy Flamingóvirág<br>
<input type="radio" name="noveny" value="Gerbera">Gerbera<br>
<input type="radio" name="noveny" value="Szobai Futóka">Szobai Futóka<br>
<input type="radio" name="noveny" value="Rákvirág">Rákvirág<br>
<input type="radio" name="noveny" value="Zöldike">Zöldike<br>
<input type="radio" name="noveny" value="Borostyán">Borostyán<br>
<input type="radio" name="noveny" value="Azálea">Azálea<br>
<input type="radio" name="noveny" value="Anyósnyelv">Anyósnyelv<br>
<input type="radio" name="noveny" value="Tarka Sárkányfa">Tarka Sárkányfa<br>
<input type="radio" name="noveny" value="Filodendron">Filodendron<br>
</div>
<div class="right-side">
<textarea class="velemeny" rows="7" cols="40" placeholder="Irja le a véleményét a növényről/virágról és hogy találkozott-e már vele? "></textarea>
<div class="textin">
Itt lesz valami hosszu szoveg amit ide fogok irni <br>
<input type="text" name="masiknoveny">
</div>
</div>
</form>
</div>
grrrrrrr, I have been struggling with this for a while.
I try to create a progress bar with connectors, I would the connectors to be under the Circles I have, when the circle is with class active the connector is shown and I would like to avoid it.
Take a look at my fiddle.
/*custom font*/
#import url(http://fonts.googleapis.com/css?family=Montserrat);
body {
font-family: montserrat, arial, verdana;
margin:0;
padding:0;
background-image:url("Capture.PNG");
}
.modal{
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content{
background-color: #fefefe;
margin: 8% auto;
border: 1px solid #888;
width: 662px;
height: 662px;
}
.modal-header{
height:100px;
}
.right-header{
float:right;
width:50%;
}
#msform .formPage {
height: 662px;
padding: 35px;
box-sizing: border-box;
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
/*Hide all except first fieldset*/
#msform > .formPage ~ .formPage{
display: none;
}
/*inputs*/
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
/*CSS counters to number the steps*/
counter-reset: step;
}
/*This is the li circle*/
#progressbar li {
counter-increment: step;
width: 27px;
height: 27px;
background-color:#dcdedf;
margin-left: 35px;
border-radius: 50%;
list-style-type: none;
float: left;
}
/*Display the li number*/
#progressbar li:before {
content: counter(step);
text-align: center;
line-height: 26px;
display: block;
color:white;
}
/*progressbar connectors*/
#progressbar li:after {
content: "";
width: 38px;
height: 10px;
background-color: #dcdedf;
position: relative;
top: -18px;
left: -36px;
display: block;
z-index: -1;
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active, #progressbar li.active:after{
background: #3395ff;
color: white;
}
#progressbar li:first-child{
margin-left:0;
}
.close {
color: #aaa;
float: right;
font-size: 24px;
padding: 5px 15px;
}
.close:hover, .close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<div class="modal">
<div class='modal-content'>
<div class='modal-header'>
<span class="close" data-action="close-modal">x</span>
<div class="left-header">
<span>Add new App</span>
<span></span>
</div>
<div class="right-header">
<!-- progressbar -->
<ul id="progressbar">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<hr/>
<div class="modal-inner-content">
<form id="msform">
<div class="formPage">
<h2 class="fs-title">Create your account</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input type="text" name="email" placeholder="Email" />
<input type="password" name="pass" placeholder="Password" />
<input type="password" name="cpass" placeholder="Confirm Password" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div class="formPage">
<h2 class="fs-title">Social Profiles</h2>
<h3 class="fs-subtitle">Your presence on the social network</h3>
<input type="text" name="twitter" placeholder="Twitter" />
<input type="text" name="facebook" placeholder="Facebook" />
<input type="text" name="gplus" placeholder="Google Plus" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div class="formPage">
<h2 class="fs-title">Personal Details</h2>
<h3 class="fs-subtitle">We will never sell it</h3>
<input type="text" name="fname" placeholder="First Name" />
<input type="text" name="lname" placeholder="Last Name" />
<input type="text" name="phone" placeholder="Phone" />
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
<div class="formPage">
<h2 class="fs-title">Social Profiles</h2>
<h3 class="fs-subtitle">Your presence on the social network</h3>
<input type="text" name="twitter" placeholder="Twitter" />
<input type="text" name="facebook" placeholder="Facebook" />
<input type="text" name="gplus" placeholder="Google Plus" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div class="formPage">
<h2 class="fs-title">Social Profiles</h2>
<h3 class="fs-subtitle">Your presence on the social network</h3>
<input type="text" name="twitter" placeholder="Twitter" />
<input type="text" name="facebook" placeholder="Facebook" />
<input type="text" name="gplus" placeholder="Google Plus" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
</form>
</div>
</div>
</div>
You need to set the z-index of the immediate parent i.e #progressbar to raise it above the other ancestors.
#progressbar {
position: relative;
z-index: 1;
}
/*custom font*/
#import url(http://fonts.googleapis.com/css?family=Montserrat);
body {
font-family: montserrat, arial, verdana;
margin: 0;
padding: 0;
background-image: url("Capture.PNG");
}
.modal {
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: 8% auto;
border: 1px solid #888;
width: 662px;
height: 662px;
}
.modal-header {
height: 100px;
}
.right-header {
float: right;
width: 50%;
}
#msform .formPage {
height: 662px;
padding: 35px;
box-sizing: border-box;
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
/*Hide all except first fieldset*/
#msform>.formPage~.formPage {
display: none;
}
/*inputs*/
#msform input,
#msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover,
#msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
/*CSS counters to number the steps*/
counter-reset: step;
position: relative;
z-index: 1;
}
/*This is the li circle*/
#progressbar li {
counter-increment: step;
width: 27px;
height: 27px;
background-color: #dcdedf;
margin-left: 35px;
border-radius: 50%;
list-style-type: none;
float: left;
}
/*Display the li number*/
#progressbar li:before {
content: counter(step);
text-align: center;
line-height: 26px;
display: block;
color: white;
}
/*progressbar connectors*/
#progressbar li:after {
content: "";
width: 38px;
height: 10px;
background-color: #dcdedf;
position: relative;
top: -18px;
left: -36px;
display: block;
z-index: -1;
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active,
#progressbar li.active:after {
background: #3395ff;
color: white;
}
#progressbar li:first-child {
margin-left: 0;
}
.close {
color: #aaa;
float: right;
font-size: 24px;
padding: 5px 15px;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<div class="modal">
<div class='modal-content'>
<div class='modal-header'>
<span class="close" data-action="close-modal">x</span>
<div class="left-header">
<span>Add new App</span>
<span></span>
</div>
<div class="right-header">
<!-- progressbar -->
<ul id="progressbar">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<hr/>
<div class="modal-inner-content">
<form id="msform">
<div class="formPage">
<h2 class="fs-title">Create your account</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input type="text" name="email" placeholder="Email" />
<input type="password" name="pass" placeholder="Password" />
<input type="password" name="cpass" placeholder="Confirm Password" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div class="formPage">
<h2 class="fs-title">Social Profiles</h2>
<h3 class="fs-subtitle">Your presence on the social network</h3>
<input type="text" name="twitter" placeholder="Twitter" />
<input type="text" name="facebook" placeholder="Facebook" />
<input type="text" name="gplus" placeholder="Google Plus" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div class="formPage">
<h2 class="fs-title">Personal Details</h2>
<h3 class="fs-subtitle">We will never sell it</h3>
<input type="text" name="fname" placeholder="First Name" />
<input type="text" name="lname" placeholder="Last Name" />
<input type="text" name="phone" placeholder="Phone" />
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
<div class="formPage">
<h2 class="fs-title">Social Profiles</h2>
<h3 class="fs-subtitle">Your presence on the social network</h3>
<input type="text" name="twitter" placeholder="Twitter" />
<input type="text" name="facebook" placeholder="Facebook" />
<input type="text" name="gplus" placeholder="Google Plus" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div class="formPage">
<h2 class="fs-title">Social Profiles</h2>
<h3 class="fs-subtitle">Your presence on the social network</h3>
<input type="text" name="twitter" placeholder="Twitter" />
<input type="text" name="facebook" placeholder="Facebook" />
<input type="text" name="gplus" placeholder="Google Plus" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
</form>
</div>
</div>
</div>
It seems to work fine when using z-index...
http://www.codeply.com/go/NklFtnx5ks
#progressbar li:after {
content: "";
width: 47px;
height: 10px;
background-color: #dcdedf;
position: relative;
top: -18px;
left: -45px;
display: block;
opacity: .99;
z-index: -1;
}
I Have the following code below , the problem i am having is that I noticed no matter what I do , I can't seem to have the right side of the extra real-state reduced as the right side seems to be having lots of extra spaces in step1 and step2.
I was trying to have it balanced for desktop, tablet and mobile.
Can some one show me how to fix this.
Here is my FIDDLE
My code below
HTML
<div class="container claim-c">
<div class="row claimBordercolor">
<div class="col-xs-4 col-sm-2 col-md-3 claim-divider">
<h2 class="steps "> <span class="steppos">STEP</span> <span class='circle pull-right'>1</span></h2>
</div>
<div class="col-xs-8 col-sm10 col-md-9">
<h4 class="claim-hdr" style="color:#fff">CURRENT </h4>
<div class="row">
<div class="col-xs-9 col-sm-4 col-md-4 ">
<label class="control-label required" for="name">SOME SOME Number <i class="fa fa-asterisk" aria-hidden="true"></i></label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
<div class="col-xs-9 col-sm-2 col-md-2">
<h2><span class="label label-warning orPos">OR</span></h2>
</div>
<div class="col-xs-9 col-sm-4 col-md-4">
<label class="control-label " for="name"> Some/test s Lotus Number</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
</div>
</div>
</div>
<!-- end of row -->
<div class="row claimBordercolor">
<div class="col-xs-4 col-sm-2 col-md-3 claim-divider2">
<h2 class="steps "> <span class="steppos">STEP</span> <span class='circle pull-right'>2</span></h2>
</div>
<div class="col-xs-8 col-sm-10 col-md-9">
<h4 class="claim-hdr" style="color:#fff"> LoremIpsumorem Ipsum Lorem ipsum lorem ipsum Lorem ipsumLoremipsum lorem ipsum.</h4>
<div class="row">
<div class="col-xs-8 col-sm-4 col-md-4">
<label class="control-label " for="name">Date of Birth(MM/DD/YYYY)</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
<label class="control-label " for="name"> Type</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
<div class="col-xs-8 col-sm-2 col-md-1">
<h2><span class="label label-warning orPos">OR</span></h2>
</div>
<div class="col-xs-8 col-sm-4 col-md-4">
<label class="control-label " for="name"> Name</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
<label class="control-label " for="name">ZIP </label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
</div>
</div>
</div>
<!-- end of row -->
</div>
CSS
.circle {
position: relative;
height: 50px;
width: 50px;
text-align: center;
line-height: 47px;
color: #000;
border-radius: 50%;
border: 2px solid #fff;
z-index: 999999;
}
.circle:after {
position: absolute;
content: '';
top: 4px;
left: 4px;
height: calc(100% - 8px);
width: calc(100% - 8px);
border-radius: inherit;
background: #fff;
z-index: -1;
}
.circle.white:after {
top: 0px;
left: 0px;
border: 4px solid #000
}
.circle.image:after {
background: url(http://lorempixel.com/200/200/abstract/4);
}
.claim-c {
border: 2px solid #ccc;
background-color: #30A759;
margin-top: 20px;
font-family: Arial, Helvetica, sans-serif;
}
.claim-c label {
color: #fff !important;
text-transform: uppercase;
padding-top: 15px;
}
.claim-divider {
border-right: 14px solid #fff;
height: 190px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 232px;
margin-top: 9px;
margin-bottom: 9px;
}
.claimBordercolor {
/* border:10px solid #FFCB00; */
border: 10px solid rgba(12, 64, 28, 0.91);
}
.claim-hdr {
width: 81%;
color: #fff;
text-transform: uppercase;
}
.margin-right20 {
margin-right: 20px;
}
.steppos {
color: #fff;
position: relative;
top: 7px;
font-weight: bold;
}
.orPos {
padding-right: 10px;
}
#media only screen and (max-width: 490px) {
body {
background-color: red;
}
.claim-divider {
border-right: 14px solid #fff;
height: 330px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 582px;
margin-top: 9px;
margin-bottom: 9px;
}
.steppos {
color: #fff;
position: relative;
top: -8px;
font-weight: bold;
}
#media only screen and ( min-width:750px) {
body {
background-color: blue;
}
.claim-divider {
border-right: 14px solid #fff;
height: 330px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 582px;
margin-top: 9px;
margin-bottom: 9px;
}
.steppos {
color: #fff;
position: relative;
top: -8px;
font-weight: bold;
}
A few things:
you have a typo .col-sm10, should be, .col-sm-10
in one of your rows you have a total of a 10 cols. when the maximum in bootstrap is 12, so instead of
.col-sm-4 + .col-sm-2 + .col-sm-4 ( total = 10)
you can have:
.col-sm-5 + .col-sm-2 + .col-sm-5 ( total = 12)
Same thing applies to md classes
About xs class when you have .col-xs-9 you should have .col-xs-12
Snippet
.circle {
position: relative;
height: 50px;
width: 50px;
text-align: center;
line-height: 47px;
color: #000;
border-radius: 50%;
border: 2px solid #fff;
z-index: 999999;
}
.circle:after {
position: absolute;
content: '';
top: 4px;
left: 4px;
height: calc(100% - 8px);
width: calc(100% - 8px);
border-radius: inherit;
background: #fff;
z-index: -1;
}
.circle.white:after {
top: 0px;
left: 0px;
border: 4px solid #000
}
.circle.image:after {
background: url(http://lorempixel.com/200/200/abstract/4);
}
.claim-c {
border: 2px solid #ccc;
background-color: #30A759;
margin-top: 20px;
font-family: Arial, Helvetica, sans-serif;
}
.claim-c label {
color: #fff !important;
text-transform: uppercase;
padding-top: 15px;
}
.claim-divider {
border-right: 14px solid #fff;
height: 190px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 232px;
margin-top: 9px;
margin-bottom: 9px;
}
.claimBordercolor {
/* border:10px solid #FFCB00; */
border: 10px solid rgba(12, 64, 28, 0.91);
}
.claim-hdr {
width: 81%;
color: #fff;
text-transform: uppercase;
}
.margin-right20 {
margin-right: 20px;
}
.steppos {
color: #fff;
position: relative;
top: 7px;
font-weight: bold;
}
.orPos {
padding-right: 10px;
}
#media only screen and (max-width: 490px) {
body {
background-color: red;
}
.claim-divider {
border-right: 14px solid #fff;
height: 330px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 582px;
margin-top: 9px;
margin-bottom: 9px;
}
.steppos {
color: #fff;
position: relative;
top: -8px;
font-weight: bold;
}
#media only screen and (min-width: 750px) {
body {
background-color: blue;
}
.claim-divider {
border-right: 14px solid #fff;
height: 330px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 582px;
margin-top: 9px;
margin-bottom: 9px;
}
.steppos {
color: #fff;
position: relative;
top: -8px;
font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container claim-c">
<div class="row claimBordercolor">
<div class="col-xs-4 col-sm-2 col-md-3 claim-divider">
<h2 class="steps"> <span class="steppos">STEP</span> <span class="circle pull-right">1</span></h2>
</div>
<div class="col-xs-8 col-sm-10 col-md-9">
<h4 style="color:#fff" class="claim-hdr">CURRENT </h4>
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-5">
<label for="name" class="control-label required">SOME SOME Number <i aria-hidden="true" class="fa fa-asterisk"></i>
</label>
<input type="text" placeholder="Enter name" name="name" id="name" class="form-control" vk_1d97d="subscribed">
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<h2><span class="label label-warning orPos">OR</span></h2>
</div>
<div class="col-xs-12 col-sm-5 col-md-5">
<label for="name" class="control-label ">Some/test s Lotus Number</label>
<input type="text" placeholder="Enter name" name="name" id="name" class="form-control" vk_1d97d="subscribed">
</div>
</div>
</div>
</div>
<div class="row claimBordercolor">
<div class="col-xs-4 col-sm-2 col-md-3 claim-divider2">
<h2 class="steps "> <span class="steppos">STEP</span> <span class='circle pull-right'>2</span></h2>
</div>
<div class="col-xs-8 col-sm-10 col-md-9">
<h4 class="claim-hdr" style="color:#fff"> LoremIpsumorem Ipsum Lorem ipsum lorem ipsum Lorem ipsumLoremipsum lorem ipsum.</h4>
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-5">
<label class="control-label " for="name">Date of Birth(MM/DD/YYYY)</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
<label class="control-label " for="name"> Type</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<h2><span class="label label-warning orPos">OR</span></h2>
</div>
<div class="col-xs-12 col-sm-5 col-md-5">
<label class="control-label " for="name"> Name</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
<label class="control-label " for="name">ZIP </label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
</div>
</div>
</div>
<!-- end of row -->
</div>
</div>
Change the col-md-4 to col-md-6.
<div class="col-xs-9 col-sm-4 col-md-6 ">
Also you have a few instances of colsm without the hyphen in between.
http://codepen.io/ruchiccio/pen/KzbBvB
On my MailChimp form I would like to have the form and submit the button inline with one another.
I have been trying several different variations of float and display but none of them have the desired effect.
Here is the original code. Anyone have any suggestions on how to align the form and the button?
#mc_embed_signup .button {
clear: both;
background-color: #aaa;
border: 0 none;
border-radius: 4px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 15px;
font-weight: bold;
height: 32px;
line-height: 32px;
margin: 10px 0px 10px 0;
padding: 0 22px;
text-align: center;
text-decoration: none;
vertical-align: top;
white-space: nowrap;
width: auto;
}
#mc_embed_signup .mc-field-group input {
display: block;
width: 100%;
padding: 8px 0;
text-indent: 2%;
}
#mc_embed_signup input.mce_inline_error {
border-color: #6B0505;
}
#mc_embed_signup input {
border: 1px solid #999;
-webkit-appearance: none;
}
#mc_embed_signup .mc-field-group label {
display: block;
margin-bottom: 3px;
}
<!-- Begin MailChimp Signup Form -->
<style type="text/css">
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<label for="mce-EMAIL">Email Addresse </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="name#domain.de">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- 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;"><input type="text" name="b_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
<div class="clear text-center"><input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
In newsletter is recommended use "old style" code, with <table> and inline style. If you use table can have the form next to each other and it will be compatible on most devices.
Live example on the jsFiddle
button {
clear: both;
background-color: #aaa;
border: 0 none;
border-radius: 4px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 15px;
font-weight: bold;
height: 32px;
line-height: 32px;
margin: 10px 0px 10px 0;
padding: 0 22px;
text-align: center;
text-decoration: none;
vertical-align: top;
white-space: nowrap;
width: auto;
}
input {
display: block;
width: 100%;
padding: 8px 0;
text-indent: 2%;
}
<table>
<tr>
<td><input type="text" placeholder="name#name.com" /></td>
<td><button>Send</button></td>
</tr>
</table>
I made some changes to your code for inline elements:
#mc_embed_signup .button {
clear: both;
background-color: #aaa;
border: 0 none;
border-radius: 4px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 15px;
font-weight: bold;
height: 32px;
line-height: 32px;
/*margin: 10px 0px 10px 0;*/
/*padding: 0 22px;*/
text-align: center;
text-decoration: none;
vertical-align: top;
white-space: nowrap;
/*width: auto;*/
}
#mc_embed_signup .mc-field-group input {
/*display: block;*/
/*width: 100%;*/
/*padding: 8px 0;*/
text-indent: 2%;
}
#mc_embed_signup input.mce_inline_error {
border-color: #6B0505;
}
#mc_embed_signup input {
border: 1px solid #999;
-webkit-appearance: none;
}
#mc_embed_signup .mc-field-group label {
display: block;
margin-bottom: 3px;
}
#mce-EMAIL{
padding: 8px 0;
display: inline-block;
width: 70%;
}
#mc-embedded-subscribe{
display: inline-block;
width: 20%;
margin: 0;
padding: 0;
}
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<label for="mce-EMAIL">Email Addresse </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="name#domain.de">
<input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- 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;"><input type="text" name="b_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
<div class="clear text-center"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
http://jsfiddle.net/mitsuru/3Lusbvjx/1/
You should put the submit input near the email from input, then "inline-block" and "width" in % do the magic.
It doesn't use tables, !importants, nor needs to fix or apply tricks. It's just CSS.
Cheers.
I'm trying to give my form a layout like the one shown on this image http://reversl.net/demo/ where the firstname and surname inputs are inline but all other inputs are stacked (i.e. on top of each other). I currently have something like this http://reversl.net/form/ using the following markup;
<div class="container">
<form>
<ol>
<li>
<label for=name>Firstname:</label>
<input id=name name=name type=text placeholder="Jon" required autofocus>
</li>
<li>
<label for=name>Surname:</label>
<input id=surname name=surname type=text placeholder="Doe" required autofocus>
</li>
<li>
<label for=message>Message:</label>
<textarea id=message name=message placeholder="Type your message here..." required></textarea>
</li>
</ol>
</form>
</div>
Styled as follows;
label {
display: block;
line-height: 1.75em;
}
input, textarea {
width: 250px;
display: inline-block;
margin-bottom: 2em;
padding: .75em .5em;
color: #999;
border: 1px solid #e9e9e9;
outline: none;
}
input:focus, textarea:focus {
-moz-box-shadow: inset 0 0 3px #aaa;
-webkit-box-shadow: inset 0 0 3px #aaa;
box-shadow: inset 0 0 3px #aaa;
}
textarea {
height: 100px;
}
Give the first two LIs display: inline-block and adjust paddings/margins as necessary.
I make it
HTML
<div class="container">
<form>
<ul style="float: left">
<label for="name">Firstname</label>
<input id="name" autofocus="" name="name" placeholder="Jon" required="" type="text">
</ul>
<ul style="float: left">
<label for="name">Surname</label>
<input id="surname" autofocus="" name="surname" placeholder="Doe" required="" type="text">
</ul>
<br><br><br><br><br>
<ul>
<ul style="padding: 0px; margin: 0px">
Message</ul>
<textarea id="message" name="message" placeholder="Type your message here..." required="" style="width: 536px"></textarea>
</ul>
</form>
</div>
and CSS
label {
display: block;
line-height: 1.75em;
}
input, textarea {
width: 250px;
display: inline-block;
margin-bottom: 2em;
padding: .75em .5em;
color: #999;
border: 1px solid #e9e9e9;
outline: none;
}
input:focus, textarea:focus {
-moz-box-shadow: inset 0 0 3px #aaa;
-webkit-box-shadow: inset 0 0 3px #aaa;
box-shadow: inset 0 0 3px #aaa;
}
textarea {
height: 100px;
}
ul {
margin: 0px;
}