I am building one of those contact forms that are conversational. Like:
The problem is that the placeholder text on one of them is very large and would either break into two lines or if I gave it a fixed width, it would break the layout of smaller mobile phones. Yes, I understand the the very simple solution would be to propose a change to the copy for any instance, but going on the fact that it cannot be done, how would I solve swapping the text based on the device width.
My proposed solution was to reduce the text on mobile. Since there they are more flexible with the mobile product, I can make these changes, but the desktop needs to comply with the PSD.
Demo
Demo on CodePen
HTML
<input type="text" id="org" name="" placeholder="ORGANIZATION OR COMPANY NAME">
CSS
#org{
display: block;
width: 96%;
margin: 0 auto;
}
#media only screen and (min-width: 768px) {
#org{
display: inline-block;
width: 360px;
}
}
It needs to be at least 360px to match the PSD for desktop.
One other option that I have is if I have entirely different inputs, would that work? like
<input type="text" id="org" class="orgm" name="" placeholder="ORG/COMPANY">
<input type="text" id="org" class="orgd" name="" placeholder="ORGANIZATION OR COMPANY NAME">
.orgm { //mobile
display: block;
}
.orgd {
display: none;
}
#media only screen and (min-width: 768px) {
.orgm{
display: none;
width: 96%;
margin: 0 auto;
}
.orgd {
display: inline-block;
width: 360px;
margin: 0;
}
}
I don't want to use jQuery or other javascript based solutions.
If you absolutely must keep that copy and are willing to do something a bit hacky, this is where it becomes annoying, but you could try...
<div class="input--container">
<p class="input--placeholder">
<span class="desktop">ORGANIZATION OR </span>
COMPANY NAME
</p>
<input type="text" id="org" class="input" name="">
</div>
// Hide the long part on mobile
.input--placeholder span { //mobile
display: none;
}
#media only screen and (min-width: 768px) {
// Show the full on desktop
.input--placeholder span {
display: inline;
}
}
And then you'll just have to position the placeholder text absolutely over the top of the input.
EDIT: You'll also have to hide the placeholder completely when the user is on the input which you can do with input:focus selector
Related
Since not everyone will be browsing the web on a computer, I need to use CSS to adapt to different screen sizes. I am working on the front-end part of the registration form, register.php. The issue is, on the computer the field name and field input position nicely. However, for the smaller screens (maximum width of 520px) I need the field name and field input to be on
top/bottom of each other, field input being on top of its field name.
HTML:
#formBody{
border-radius: 10px;
background-color: #3385ff;
padding-left: 5%;
padding-right: 5%;
padding-top: 0.5em;
padding-bottom: 0.5em;
width: 90%;
max-width: 50em;
margin: auto;
}
.field{
margin: auto;
width: 66.6%;
}
.fieldDescription{
width: 33%;
color: black;
font-size: 1.2em;
}
.fieldInput{
width: 33%;
margin: auto;
}
.input{
width: 100%;
background-color: #e6f0ff;
border-style: none;
}
CSS:
<div id="formBody">
<table>
<form>
<tr class="field">
<td class="fieldDescription">
<p>First Name:</p>
</td>
<td class="fieldInput">
<input class="input" name="firstname" type="text">
</td>
</tr>
</form>
</table>
</div>
I used an HTML table to give each field its own space. I used the <tr> element to make a row for each field, and used two <td>element to put the field name and field input in its own column. This works great for a computer screen, but it doesn't work on the smaller screen (like a smartphone). If I use something like <p class="fieldDescription">Fist Name:</p> for the field name, then <input class="fieldInput" name="firstName" type="text"> for the field input, then I'm hard coding only for small screens.
Is there a way to satisfy both screen sizes, without having to hard code it either way? I would prefer to not use Javascript. I would like to do it CSS.
Click here for the HTML
Click here for the CSS
(both are on gist.github.com)
I'll highly recommend you to use valid and semantic form elements like label and fieldset. But to address your question:
#media screen and (max-width: 520px) {
#mainContainer {
border-radius: 5px;
}
#formBody {
border-radius: 0px;
}
.fieldDescription,
.fieldInput {
width: 100%;
display: inline-block;
}
.fieldDescription p {
margin-bottom: 0;
}
}
A Few Things to tell:
What you are looking for is making responsive designs. You should take a look to Media Queries
I Highly recomend not to use tables in cases like this, just use a table when u REALLY need a table
Here is a LIVE EXAMPLE with the HTML and CSS code of what you want to do. (Resize the browser to see).
Try not to style your forms with <p> <tr> <td> and so on... Use <label> instead.
Hope this work.
#media + display:block; should be basicly what you need:
#media screen and (max-width: 520px) {
table,/* to spray whole space as block does */
tbody,/* because it is there even not in the code :) */
tr,/* this too must be a block */
td /* goal to reach to start from */{
display: block;
}
}
#media screen and (max-width: 520px) {
table,
tbody,
tr,
td {
display: block;
text-align: center;
}
}
/* copy to match snippet size */
#media screen and (max-width: 700px) {
table,
tbody,
tr,
td {
display: block;
text-align: center;
}
}
/* warning */
legend {
color: tomato;
}
<div id="formBody">
<form>
<fieldset>
<legend>Put that form around the table not in between table & tr tags !!</legend>
<table>
<tr class="field">
<td class="fieldDescription">
<p>First Name:</p>
</td>
<td class="fieldInput">
<input class="input" name="firstname" type="text">
</td>
</tr>
</table>
</fieldset>
</form>
</div>
And demo including your style
This is driving me nuts! I'm hoping someone can help me...I'm pretty new to HTML and CSS.
I've got a sign-up form I'm trying to style on my website. Just first name, email and submit button. I want the two input fields to be on the same line (managed to achieve this), and have them take up 100% of the space. Then when the window shrinks down to mobile, they're on a line each. Mostly everything is working except the fields won't show past a certain width. I've tried a variety of combinations using width=100%, width=auto, width=..px...
Here's a screen shot of what it looks like at the moment:
http://www.marnielefevre.com/new/wp-content/uploads/2016/02/Screen-Shot-2016-02-22-at-4.10.20-pm.png
Here's a snippet of my relevant HTML...
<div class="fielddiv">
<div class="fieldrow"><label>First Name*</label>
<input name="firstname" required="" type="text" /></div>
<div class="fieldrow"><label>Email*</label>
<input name="email" required="" type="email" /></div>
<div style="padding-top: 40px; text-align: center;"><input type="submit" value="SIGN ME UP" /></div>
</div>
...and the CSS
.fielddiv {
text-align: center;
margin: auto;
width: auto;
}
.fieldrow {
display: inline-block;
margin: auto;
text-align: center;
padding-top: 20px;
min-width: 330px;
max-width: 800px;
}
I appreciate any help!!
Without knowing what the other code in your application is doing, I would suggest (blindly) the following;
.fielddiv {
display: flex;
}
.fieldrow {
flex: 1;
text-align: center;
}
.fieldrow:first-child {
margin-right: 20px;
}
Please use below code in your application, it will increase width of textbox for your page:
.fielddiv input[type="text"] {
width:100%;
}
.fielddiv input[type="email"] {
width:100%;
}
OR
.fielddiv input[type="text"] {
width:100% !important;
}
.fielddiv input[type="email"] {
width:100% !important;
}
Hope this will meet your requirement.
I have this HTML Code:
<h4>Company Details</h4>
<div>
<label for="company">Company</label>
<div>
<input type="text" name="company" value="<?php echo $customer["company"]; ?>" />
</div>
</div>
I would like to have the text inputs and labels displaying inline with each other then as the screen gets smaller to move the text inputs under the labels
There are many ways to achieve this. Chose the one that fits your project the best. I would set the label and the div containing the input as "inline" or "inline-block" using CSS. Then if you need then line to collapse into two, use media queries (see the last code snippet).
<h4>Company Details</h4>
<div class="input-group">
<label for="company">Company</label>
<div>
<input type="text" name="company" value="<?php echo $customer["company"]; ?>" />
</div>
</div>
// This will make them show inline occupying half the width
.input-group > label, .input-group > div{
display: inline-block;
width: 50%;
}
I sometimes have problems with extra pixels in inline-blocks,
and I typically solve it by floating the blocks or setting the
font size to zero.
// This way the label and input float
.input-group {
clear: both; // So the container doesn't collapse
}
.input-group > label, .input-group > div{
float: left;
width: 50%;
}
For the font size version:
// This way the font size in the container is zero
.input-group {
font-size: 0;
}
.input-group > label, .input-group > div{
display: inline-block;
width: 50%;
font-size: 12px;
}
Your div will automatically stretch to 100% of the screen, so You don't need media queries to set its width; it's already responsive as is. But if you insist on using them, or need them, add this as well:
#media (max-width: 500px) {
.input-group > label, .input-group > div{
display: block;
float: none;
}
}
It's pretty easy to achieve. Simply set:
.inputLine label, .inputLine div {
display: inline;
}
With the HTML being:
<h4>Company Details</h4>
<div class="inputLine">
<label for="company">Company</label>
<div>
<input type="text" name="company" value="My Company" />
</div>
</div>
Working example:
http://jsfiddle.net/wLjekogo/
Updated: april 20th, 2015
To achieve the requested output, while allowing multiple inline elements. You could use the following HTML/CSS combination:
HTML
<h4>Company Details</h4>
<div class="inputLine">
<label for="company">Company</label>
<input type="text" name="company" value="My Company" />
</div>
<div class="inputLine">
<label for="company">Company</label>
<input type="text" name="company" value="My Company" />
</div>
CSS
.inputLine {
display: inline-block;
}
.inputLine label {
display: inline-block;
max-width: "100%";
}
.inputLine input {
display: inline-block;
width: auto;
}
This would show all input fields inline, unless the screen is too small. In which case first the divs will be on a new line, and even more smaller, a vertical form.
Example:
http://jsfiddle.net/wLjekogo/2/
How do I make the input elements have the same size and alignment as my div elements? (facebookLoginButton and standardLoginButton)
HTML code:
<header>
<div id="topPane">
<h1 id="georgeLogo">G.</h1>
<div id="login">
<div id="facebookLoginButton">Continue with Facebook</div>
<br class="lb">
<div class="center">or</div>
<br class="lb">
<form id="loginForm">
<input type="text" placeholder="Email Address" required>
<br>
<input type="text" placeholder="Password" required>
</form>
<div id="standardLoginButton">Login</div>
</div>
</header>
<div id="bottomPane"></div>
Jsfiddle http://jsfiddle.net/0013v9yj/
In css, apply the same styles to the input... and add display: block to the input
Changed the last css block into this (just added input size on media queries, you only added it in the last of them)
/*********************
MEDIA QUERIES
*********************/
#media only screen and (min-width: 0px) and (max-width: 480px) {
#georgeLogo {
font-size: 6em;
}
#facebookLoginButton, #standardLoginButton, #loginForm input {
font-size: 1.5em;
width: 12.5em;
}
}
#media only screen and (min-width: 481px) and (max-width: 768px) {
#georgeLogo {
font-size: 7em;
}
#facebookLoginButton, #standardLoginButton, #loginForm input {
font-size: 1.5em;
width: 15em;
}
}
#media only screen and (min-width: 769px) {
#georgeLogo {
font-size: 8em;
}
#facebookLoginButton, #standardLoginButton, #loginForm input {
font-size: 2em;
width: 15em;
}
#loginForm {
width: 15em;
}
}
So your issue is that you're using em instead of rem or pixels.
em is relative to its parent, so this can get kind of confusing with the math. If you have an li which is sized at 1.2em and nest another li inside it, it effectively gets a font-size of 1.2 × 1.2 = 1.44em.
rem is not relative to its parent, but to the root of the documnet (default of 16px). However, keep in mind rem is not supported by IE < 9.
In your code, 15 em is a different width for your form and your facebookLoginButton because you keep changing that parent's font-size/em.
I'm using a form like the following:
<form action="#" method="post">
<div class="row">
<label for="email">E-Mail</label>
<input type="text" name="email" id="email">
</div>
<div class="row">
<label for="password">Password</label>
<input type="password" name="password" id="password">
<br>
<label for="passwordRepeat">Repeat Password</label>
<input type="password" name="passwordRepeat" id="passwordRepeat">
</div>
<div class="row">
<label for="phonenumber">Phone Number</label>
<input type="text" name="phonenumber" id="phonenumber">
</div>
</form>
with the following styles:
.row {
background-color: #eee;
margin-bottom: 10px;
padding: 5px;
}
.row > * {
display: inline-block;
vertical-align: middle;
}
.row > label {
width: 200px;
}
Take a look at the JSFiddle.
I'm using a <br> tag to break the line between a bunch of elements with the property display: inline-block. I'm aware that it is of course bad practice to use <br> instead of margin and padding. That's the reason it became so unpopular.
As far as I know there is no good reason to not use a single <br> tag in an inline element as it is intended to be: As a line break in text without creating a new text section. With display: inline-block, you simulate the inline behaviour to your block elements. Spaces between elements appear as they would in an inline element.
In my case, the <br> is used instead of two wrapper <div>'s. I do like my HTML code clean, so I hesitate in using to many wrapper <div>'s. Is it bad practice to use a <br> in this exact case? I think it is very clear what happens here, if you just read the HTML flie. What do you think about that (without any prejudgments about <br> in general)?
I believe the answer is Yes. <br /> is for line breaks in text and not for positioning, But I will give you a situation where it would hurt you in the long run. Say you have a mobile layout for your fields, and you want them to be 100% width on small screens - with labels above... and then in another case you want them to vertically align next to another... and then in another situation land in a grid like setup. Those linebreaks are going to become cumbersome.
Here is a jsFiddle of that.
I did see someone using them in a clever way where they used display: none; on them at certain break points that rendered them inactive. I didn't expect that to work. I can only really imagine using them for:
Cosmo magazine
style - huge
text layouts
and even then I would use lettering.js to insert spans. But hey --- it's not that people will say you were wrong... it's what does the job best. And I don't think that <br /> ever really suits positioning.
With HTML5, it seems like everything has an element now, so div's are for positioning. That seems pretty semantic to me.
HTML
<div class="input-wrapper">
<label data-required="required">E-Mail</label>
<input type="email" name="email" />
</div>
CSS
.your-form .input-wrapper {
width: 100%;
float: left;
margin-bottom: 2em;
}
.your-form label {
display: block;
width: 100%;
float: left;
}
[data-required="required"]:after{
content: "*";
color: red;
font-size: .8em;
vertical-align: top;
padding: .2em;
}
.your-form input{
display: block;
width: 100%;
float: left;
}
#media screen and (min-width: 28em) {
.your-form label {
width: auto;
float: none;
display: inline-block;
vertical-align: middle;
min-width: 10em;
}
.your-form input{
width: auto; /* overide previous rule */
float: none; /* overide previous rule */
display: inline-block; /* center vertically */
vertical-align: middle; /* center vertically */
/* min-width: 20em; */
font-size: 1.4em; /* just to show vertical align */
}
} /* end break point */
Yes, as you are using a content element for styling.
It might be shorter, but that doesn't mean it's cleaner.
Adding elements just for styling purposes should be avoided if possible.
And in this case it's possible: Demo
HTML:
<form action="#" method="post">
<div class="row">
<label>E-Mail <input type="text" name="email" /></label>
</div>
<div class="row">
<label>Password <input type="password" name="password" /></label>
<label>Repeat Password <input type="password" name="passwordRepeat" /></label>
</div>
<div class="row">
<label>Phone Number <input type="text" name="phonenumber" /></label>
</div>
</form>
CSS:
.row {
background-color: #eee;
margin-bottom: 10px;
padding: 5px;
}
.row > label {
display: block;
overflow: hidden;
width: 350px;
}
.row > label > input {
float: right;
}
I would avoid it where possible. You may be able to achive what you want, and not use floats by adding a margin to the input element like:
.row > input
{
margin-right:50%;
}
http://jsfiddle.net/pwtA4/
You may need to add some media queries if you want for smaller view ports