I need to do mobile version of this page.(code below) But I receive the result such as on screenshot see my mobile version What i have do?
P.S. if not difficult couple of words about the html structure and css (I just started to learn how to make websites)
.row-wrap-left,
.row-wrap-right,
.row-wrap-bottom,
.field-wrap {
float: none;
width: 100%;
}
.request-input {
width: 90%;
}
textarea {
width: 98%;
}
.button-submit {
float: none;
width: 100%;
margin-bottom: 20px;
}
.button-cancel {
float: none;
width: 100%;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
body {
background: #282828;
font-family: 'Montserrat', sans-serif;
}
.container {
background: #27292b;
max-width: 636px;
}
.request {
text-align: left;
position: relative;
overflow: hidden;
}
.wrapper {
padding: 36px 85px 60px 85px;
}
.row-wrap-left {
float: left;
width: 50%;
overflow: hidden;
}
.row-wrap-right {
float: right;
width: 50%;
overflow: hidden;
}
.row-wrap-right .field-wrap {
float: right;
}
.row-wrap-bottom {
float: left;
width: 100%;
overflow: hidden;
}
.field-wrap {
position: relative;
}
form {
overflow: hidden;
}
.request-head h1 {
font-size: 29px;
text-transform: uppercase;
color: #fff;
padding-bottom: 25px;
border-bottom: solid 1px #47494b;
margin-bottom: 36px;
}
.request-input {
width: 195px;
height: 12px;
font-size: 18px;
padding: 14px;
background: none;
border: 1px solid #47494b;
border-radius: 2px;
margin-top: 17px;
margin-bottom: 44px;
}
.request-country,
.request-code {
width: 33px;
}
.request-number {
width: 58px;
}
.request-input:focus,
textarea:focus {
outline: none;
color: #fff;
border-color: #fff;
}
.request-input:focus ~ label,
.request-input:focus + span,
textarea:focus + label {
color: #fff;
}
.field-wrap label {
color: #434546;
font-size: 13px;
display: block;
position: absolute;
top: 0;
}
.field-wrap .icon {
position: absolute;
top: 30px;
margin-left: -40px;
padding-left: 10px;
color: #434546;
}
textarea {
width: 460px;
height: 150px;
font-size: 18px;
background: none;
border: 1px solid #47494b;
border-radius: 2px;
margin-top: 17px;
margin-bottom: 28px;
}
p {
font-size: 13px;
color: #434546;
}
a {
font-size: 13px;
text-decoration: none;
color: #fff;
}
.agreement {
margin-bottom: 30px;
}
.button-submit {
background: #5d9f81;
color: #fff;
border: none;
padding: 14px 44px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
border-radius: 2px;
margin-right: 18px;
}
.button-cancel {
background: none;
color: #434546;
border: 1px solid #47494b;
padding: 14px 44px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
border-radius: 2px;
}
.button-submit:hover {
background: #4c876c;
color: #fff;
cursor: pointer;
}
.button-cancel:hover {
background: #5d9f81;
color: #fff;
cursor: pointer;
}
input:focus:invalid,
textarea:focus:invalid {
border: 1px solid #e7635e;
}
input:focus:invalid ~ label {
color: #da5f5b;
}
input:focus:invalid + span {
color: #da5f5b;
}
textarea:focus:invalid + label {
color: #da5f5b;
}
input:required:valid,
textarea:required:valid {
border: 1px solid #6abd97;
color: #6abd97;
}
input:required:valid + label,
textarea:required:valid + label{
color: #6abd97;
}
input:required:valid ~ label {
color: #6abd97;
}
input:required:valid + span {
color: #6abd97;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Register form</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/small.css" media="(max-width:600px)">
</head>
<body>
<div class="container clearfix">
<div class="wrapper clearfix">
<div class="request clearfix">
<div class="request-head">
<h1>Request a demo</h1>
</div>
<form action="/" method="post">
<div class="row-wrap-left">
<div class="field-wrap">
<input type="text" name="form_data[first_name]" id="fname" class="request-input request-fname" required autocomplete="off">
<label for="fname">First Name</label>
</div>
<div class="field-wrap">
<input type="email" name="form_data[email]" id="email" class="request-input request-email" required autocomplete="off">
<label for="email">Email *</label>
</div>
<div class="field-wrap">
<input type="text" name="form_data[school_organization]" id="school-org" class="request-input request-school" required autocomplete="off">
<span class="icon"><i class="fa fa-search"></i></span>
<label for="school-org">School/Organization *</label>
</div>
</div>
<div class="row-wrap-right">
<div class="field-wrap">
<input type="text" name="form_data[last_name]" id="lname" class="request-input request-lname" required autocomplete="off">
<label for="lname">Last Name</label>
</div>
<div class="field-wrap">
<input type="tel" name="form_data[phone][country]" id="tel" class="request-input request-country" required autocomplete="off" pattern="[0-9]{3}">
<input type="tel" name="form_data[phone][code]" id="tel" class="request-input request-code" required autocomplete="off" pattern="[0-9]{2}">
<input type="tel" name="form_data[phone][number]" id="tel" class="request-input request-number" required autocomplete="off" pattern="[0-9]{7}">
<label for="tel">Phone Number</label>
</div>
<div class="field-wrap">
<input type="text" name="form_data[role]" id="role" class="request-input request-role" required autocomplete="off">
<label for="role">Role on Campus *</label>
</div>
</div>
<div class="row-wrap-bottom">
<div class="field-wrap">
<textarea name="form_data[goals]" id="goals" class="label-goals" required autocomplete="off"></textarea>
<label for="goals">What are your goals for DemoSystem? *</label>
</div>
<p class="agreement">
<input type="checkbox" name="checkbox" id="checkbox" checked>
<label for="checkbox">
I agree to the DemoSystem
<span>
Terms of Service
</span>
and
<span>
Privacy Policy
</span>
</label>
</p>
<div class="field-wrap">
<button class="button-submit">Submit</button>
<button class="button-cancel">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
You can use media query in your css.
Media query allowed you to change css depending on the screen size.
#media screen and (max-width: 750px) {
/* your new Css here */
}
Right after the max-width parametre you put the desired width.
If the max-width parameter is set to 750px the code will be active whenever the screen size is bellow 750px.
Then you can put all the existing css selector already used for higher screen and make them have new value.
Put the media query code at the bottom of you css style sheet.
You can use several media query in the same code.
Example:
#media screen and (max-width: 1150px) {
/* your new Css for tablet here */
}
#media screen and (max-width: 750px) {
/* your new Css for smart phone here */
}
Also it's strongly advise to add the code below on the head of your html code
<meta name="viewport" content="width=device-width, initial-scale=1">
Feel free to ask if needed.
In the small css you have to specify a new width for input #id:
#tel{
width:25%;
}
Result: jsfiddle
Related
I have the backgroundlogin.jpg image in the assets folder of my angular project, and I would like to know how I can place it under my layout, in the white part of the figure below, where the arrows are located:
below is the project's html and ccs codes:
login.component.html:
<div class="jumbotron pt-5">
<img class="center" src="../assets/images/full-banner1.jpg">
<form class="form-signin jumbotron">
<h2 class="form-signin-heading">LOGIN</h2>
<label for="inputEmail" class="sr-only">Usuário</label>
<input name="email" [(ngModel)] = "user.username" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Senha</label>
<input name="password" [(ngModel)] = "user.password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me">Lembrar me
</label>
</div>
<button class="btn btn-lg btn-color btn-block" (click)="validateLogin();" type="button">Entrar</button>
</form>
</div>
<footer class="footer navbar-default" role="contentinfo">
<div class="container">
<p class="absolute">
Criado por Douglas
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Add font awesome icons -->
</p>
</div>
</footer>
login.component.css:
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
background-color: black;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
color: lightgray;
}
.jumbotron{
margin-top: 0 auto;
background-color: black;
}
.form-signin .checkbox {
font-weight: 400;
color: lightgray;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background-color: white;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: white;
}
.btn-color {
color: black;
background-color: white;
}
.form-signin-heading{
text-align-last: center;
color: lightgray;
}
/* Style all font awesome icons */
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
}
/* Add a hover effect if you want */
.fa:hover {
opacity: 0.7;
}
/* Facebook */
.fa-facebook {
background: #3B5998;
color: white;
}
/* Twitter */
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-instagram {
background: rgb(216, 128, 182);
color: white;
}
.footer{
margin-top: 0;
background:black;
}
the end result would look like this:
Try this.
style.scss
.bck-img {
background-image: url(./assets/images/your_image.jpg);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-repeat: no-repeat;
background-size: cover;
}
login.component.ts
ngOnInit(): void {
const body = document.getElementsByTagName('body')[0];
body.classList.add('bck-img');
}
...
ngOnDestroy(): void {
const body = document.getElementsByTagName('body')[0];
body.classList.remove('bck-img');
}
Make sure implement both OnInit& OnDestroylike this,
export class LoginComponent implements OnInit, OnDestroy { ... }
If you want also remove black part try this.
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
background-color: transparent;
}
Janitha Rasanga answer was right so i made the following change:
background-image: url(./assets/images/backgroundlogin.jpg);
for
background-image: url(/assets/images/backgroundlogin.jpg);
I am trying to move my login form to the right of screen and have tried to use positioning or margin but can't get it to move in my mobile media query. I thought that by using either margin or positioning should make it move but it doesn't and I am not sure what else to try. I have also changed my position to relative instead of using absolute but it still doesn't move it
header div.nav-login{
position: absolute;
top: 9em !important;
margin-left: -5em !important;
}
header div.nav-login ::placeholder {
color: #6A5ACD;
opacity: 1;
font-size: .7em;
}
header div.nav-login input[type='password'] {
position: absolute;
left: 8em;
}
header div.nav-login input[type='password']::placeholder {
position: relative;
left: 1em;
font-size: .7em;
}
header div.nav-login form{
padding-top: 40px;
}
header div.nav-login form input{
float:left;
width: 5.8em;
height: 2.5em;
padding-left: 5px;
margin-right: 10px !important;
border:none;
background-color: #ccc;
font-family: arial;
font-size: 14px;
color: #111;
line-height: 20px;
}
header div.nav-login form button{
float:left;
width: 60px;
height: 30px;
margin-right: 10px;
border:none;
background-color: #FFF8DC;
font-family: arial;
font-size: 14px;
color: #111;
cursor:pointer;
position: absolute;
left: 15.5em;
top: 3.2em;
}
header div.nav-login form button:hover{
background-color: #ccc;
}
header div.nav-login a{
display: block;
width: 60px;
height: 60px;
border:none;
float:left;
background-color: #fff;
font-family: arial;
font-size: 16px;
color: #111;
line-height: 63px;
cursor:pointer;
}
header div.nav-login [type=password]::placeholder {
left: 1em;
}
html code:
}
}
}
}
}
} else {
if (isset($_SESSION['u_uid']) ) {
echo '<form action="includes/logout.php" method="POST" class="logout">
<button type="submit" name="submit">Logout</button>
</form><div class="trophy"><i class=" fas fa-trophy fa-4x" title="Click here to view your rewards!"></i></div>';
} else {
echo '<form action="includes/login.php" method="POST">
<input type="text" name="uid" placeholder="Username/e-mail">
<input type="password" name="password" placeholder="password">
<button type="submit" name="submit" value="submit">Login</button></form>';
}
Add class login-form to your form
<form action="includes/login.php" method="POST" class="login-form">
<input type="text" name="uid" placeholder="Username/e-mail">
<input type="password" name="password" placeholder="password">
<button type="submit" name="submit" value="submit">Login</button>
</form>
and add this to your css
.login-form {
float: right;
}
use media queries in your CSS.
#media only screen and (max-width:768px) and (min-width:200px)
{
/* Your CSS Code For Mobile Style */
}
Instead of showing label next to radio button, it is shown above it.
new.html.erb:
<div class="center jumbotron">
<h2><%= t(:creating_task) %></h2>
<%= form_for(#task, url: new_task_path) do |f| %>
...
<div>
<%= label :form_type, t(:multiple_choice) %>
<%= f.radio_button :form_type, '1' %>
<div class="reveal-if-active">
</div>
</div>
<div>
<%= label :form_type, t(:fill_gap) %>
<%= f.radio_button :form_type, '2' %>
<div class="reveal-if-active">
</div>
</div>
<% end %>
</div>
I am using bootstrap and even when I copy bootstrap example, which looks like this:
It looks like in picture above.
What could be the reason?
#EDIT
<h2>Tworzenie zadania</h2>
<form class="new_task" id="new_task" enctype="multipart/form-data" action="/pl/tasks/new" accept-charset="UTF-8" method="post"><input name="utf8" value="✓" type="hidden"><input name="authenticity_token" value="xxx" type="hidden">
<label for="text_Kategoria">Kategoria</label>
<select name="task[category]" id="task_category"><option value=""></option>
<option value="1">Test</option></select>
<label for="text_Obraz">Obraz</label>
<input name="task[asset_name]" id="task_asset_name" type="file">
<!-- dodać podgląd -->
<label for="text_Opis">Opis</label>
<textarea class="form-control" name="task[text]" id="task_text"></textarea>
<!-- dodać poprawne wyświetlanie równań -->
<label for="form_type_Rodzaj zadania">Rodzaj zadania</label>
<div>
<label for="form_type_Wielokrotny wybór">Wielokrotny wybór</label>
<input value="1" name="task[form_type]" id="task_form_type_1" type="radio">
<div class="reveal-if-active">
</div>
</div>
<div>
<label for="form_type_Wypełnianie luk">Wypełnianie luk</label>
<input value="2" name="task[form_type]" id="task_form_type_2" type="radio">
<div class="reveal-if-active">
</div>
</div>
</form>
CSS:
#import "bootstrap-sprockets";
#import "bootstrap";
/* universal */
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
/* header */
#test-name {
margin-right: 10px;
font-size: 1.7em;
color: #fff;
letter-spacing: -1px;
padding-top: 50px;
font-weight: bold;
float: left;
}
#user-link {
margin-right: 10px;
font-size: 1.7em;
color: #fff;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
float: right;
text-decoration: none;
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid #eaeaea;
color: #777;
}
footer a {
color: #555;
}
footer a:hover {
color: #222;
}
footer small {
float: left;
}
footer ul {
float: right;
list-style: none;
}
footer ul li {
float: left;
margin-left: 15px;
}
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
height: auto !important;
}
#error_explanation {
color: red;
ul {
color: red;
margin: 0 0 30px 0;
}
}
.field_with_errors {
#extend .has-error;
.form-control {
color: $state-danger-text;
}
}
.reveal-if-active {
opacity: 0;
max-height: 0;
overflow: hidden;
transform: scale(0.8);
transition: 0.5s;
input[type="radio"]:checked ~ &,
input[type="checkbox"]:checked ~ & {
opacity: 1;
max-height: 100px;
overflow: visible;
padding: 10px 20px;
transform: scale(1);
}
}
/* Users index */
.users {
list-style: none;
margin: 0;
li {
overflow: auto;
padding: 10px 0;
border-bottom: 1px solid $gray-lighter;
}
}
You can use display:inline-block like:
.new_task input[type="radio"] {
float : left;
width : auto;
}
I have a form validation using the html5, but when the form is inside a certain div, the validation doesnt work.
The div:
div class="slide story" id="slide-6" data-slide="6">
...
</div>
If the form is out of this div it works fine! But when this div surround the form the validation doens't work.
The Css:
#slide-6 {
background-color: #00387F;
color: #e4e6e5;
padding-bottom: 350px;
padding-top: 90px;
}
.contact-info .contact-content{
margin-bottom: 30px;
}
.contact-info p{
margin-bottom: 20px;
}
.contact-info p i{
font-size: 16px;
margin-right: 10px;
}
.contact-form{}
.contact-form input[type="text"],
.contact-form input[type="email"]{
border: 1px solid #E8E8E8;
padding: 8px 14px;
width: 100%;
margin-bottom: 20px;
}
.contact-form textarea{
border: 1px solid #E8E8E8;
padding: 8px 14px;
width: 100%;
margin-bottom: 20px;
}
#media (max-width: 767px) {
#slide-6 {
background-image: none;
}
}
#slide-6 .line-row .hr {
background-color: #FFFFFF;
color: #FFFFFF;
}
#slide-6 a {
color: inherit;
outline: none;
text-decoration: none;
}
#media (max-width: 767px) {
.with-hover-text{
margin-bottom: 2em;
margin-top: 1em;
}
}
#contact-row-4 {
padding-top: 125px;
}
#contact-row-4 .col-12 {
height: 175px;
overflow: hidden;
padding-top: 20px;
transition: all ease-in .5s;
}
#contact-row-4 img {
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
#contact-row-4 .col-12:hover {
height: 175px;
padding-top: 0;
}
#contact-row-4 .col-12 .hover-text {
display: none;
font-size: 20px;
}
The form:
<div class="slide story" id="slide-6" data-slide="6">
<div class="col-sm-7 col-sm-offset-1">
<form action="php/send-contact.php" class="contact-form" name="contact-form" method="post">
<div class="row">
<div class="col-sm-6">
<input type="text" name="name" required="required" placeholder="Name*">
</div>
<div class="col-sm-6">
<input type="email" name="email" required="required" placeholder="Email*">
</div>
<div class="col-sm-6">
<input type="text" name="subject" placeholder="Subject">
</div>
<div class="col-sm-6">
<input type="text" name="website" placeholder="Website">
</div>
<div class="col-sm-12">
<textarea name="message" required="required" cols="30" rows="7" placeholder="Message*"></textarea>
</div>
<div class="col-sm-12">
<input type="submit" name="submit" value="Send Message" class="btn btn-send">
</div>
</div>
</form>
</div>
</div>
Can you please help me?
I've tried reducing my "Number of employees" input field to a size of "3" (all others have a size of "8").
However my number of employees input field is not reducing it's length?
Can anyone shed any light to as why?
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "Arial", "Myriad Pro", "Myriad Web", "Tahoma", "Helvetica", sans-serif;
font-size: 0.9em;
}
form header {
margin: 0 0 20px 0;
}
form header div {
font-size: 90%;
color: #999;
}
form header h2 {
margin: 0 0 5px 0;
}
form > div {
clear: both;
overflow: hidden;
padding: 1px;
margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
margin: 0 0 5px 0;
}
form > div > label,
legend {
width: 25%;
float: left;
padding-right: 10px;
}
form > div > div,
form > div > fieldset > div {
width: 75%;
float: right;
}
form > div > fieldset label {
font-size: 90%;
}
fieldset {
border: 0;
padding: 0;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
width: 100%;
height: 1.6em;
border-top: 1px solid #a9a9a9;
border-left: 1px solid #a9a9a9;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #a9a9a9;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
width: 50%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
outline: 0;
border-color: #4697e4;
}
#media (max-width: 600px) {
form > div {
margin: 0 0 15px 0;
}
form > div > label,
legend {
width: 100%;
float: none;
margin: 0 0 5px 0;
}
form > div > div,
form > div > fieldset > div {
width: 100%;
float: none;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea,
select {
width: 100%;
}
}
#media (min-width: 1200px) {
form > div > label,
legend {
text-align: right;
}
}
/* JQuery Validation */
label.error,
select.error,
textarea.error,
input.error {
padding-left: 5px;
display: block;
color: #f00;
}
label {
padding-right: 10px;
}
.hide {
display: none;
}
.loader {
background: url("https://secure.workbooks.com/resources/=QzM/spinner_gray_160.gif") no-repeat center center transparent;
}
.notification {
font-weight: bold;
background-color: rgb(209, 224, 94);
border-radius: 5px;
padding: 10px;
color: rgb(131, 6, 6);
}
.loudbutton,
.quietbutton {
width: 60%;
height: 40%;
color: white;
border-radius: 0.5em;
background-color: rgb(79, 111, 163);
border: none;
padding: 7px;
margin: 10px 0px 10px 0px;
-webkit-appearance: none;
float: none;
}
.desc {
font-weight: bold;
}
.grayborder {
border: 1px solid;
}
.quietbutton {
margin-left: 10px;
}
.loudbutton {
font-size: 1.35em;
}
.quietbutton {
font-size: 0.8em;
}
.loudbutton:hover {
cursor: pointer;
width: 60%;
height: 40%;
background-color: #84a3d9;
}
/* Sticky footer: http://www.cssstickyfooter.com/ */
#wrap {
min-height: 100%;
}
#main {
overflow: auto;
padding-bottom: 45px;
/* must be same height as the footer */
}
#main-img {
float: left;
}
#main-banner {
float: right;
padding-left: 20px;
}
#main-body {
clear: both;
}
/*Opera Fix*/
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;
/
}
/* Workbooks Attribution: please leave this */
#footer {
position: relative;
margin-top: -45px;
height: 45px;
clear: both;
background-image: url(https://secure.workbooks.com/images/logo/workbooks_logo.png);
background-color: #80a0ff;
background-position: center left;
background-repeat: no-repeat;
background-size: 119px 42px;
}
#workbooks-link {
position: absolute;
text-decoration: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
background-image: url('https://secure.workbooks.com/images/s.gif');
/* fix overlap error in IE7/8 */
}
/* Fade-in Spinner */
#spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(https://public.workbooks.com/images/spinner.gif) 50% 50% no-repeat #ede9df;
}
<form action="#">
<div>
<label class="desc" id="title1" for="first_name">First Name</label>
<div>
<input id="first_name" name="first_name" type="text" class="required field text fn" value="" size="8" tabindex="1" minlength="2" autofocus>
</div>
</div>
<div>
<label class="desc" id="title2" for="last_name">Last Name</label>
<div>
<input id="last_name" name="last_name" type="text" class="required field text fn" value="" size="8" tabindex="2">
</div>
</div>
<div>
<label class="desc" id="title3" for="email">Email</label>
<div>
<input id="email" name="email" type="email" class="required email" spellcheck="false" value="" maxlength="255" tabindex="3">
</div>
</div>
<div>
<label class="desc" id="title4" for="telephone">Telephone</label>
<div>
<input id="telephone" name="telephone" type="text" class="required field text fn" value="" size="8" tabindex="4">
</div>
</div>
<div>
<label class="desc" id="title5" for="number_of_employees">Number of Employees</label>
<div>
<input id="number_of_employees" tabindex="5" name="number_of_employees" type="text" class="required integer field text fn" pattern="[0-9]*" size="3" />
</div>
</div>
<div>
<label class="desc" id="title6" for="company_name">Company Name</label>
<div>
<input id="company_name" name="company_name" type="text" class="required field text fn" value="" size="8" tabindex="6">
</div>
</div>
<div>
<fieldset>
<div>
<div>
<input id="submit" name="submit" type="submit" value="Get access ►" class="loudbutton" />
</div>
</div>
</form>
Your css rules are taking precedence and the size attribute is no longer considered, unless css is disabled.
In 1 of your css rules you define the width of an input as 50%, what you need is to create a "stronger" rule that will define the size for smaller inputs. You can do so by adding a class to the same rule that sets the initial width.
Add a new line after this code with:
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
width: 50%;
}
/* new line - adjustment to smaller input fields */
input[type=text].size-small,
input[type=email].size-small,
input[type=url].size-small,
input[type=password].size-small {
width: 25%;
}
and for the elements that you would like to assign size="3" add attribute class="size-small"