I have done the following with my forms:
Noe everything is fine when I have it on a large screen. But when I test it in my ripple emulator in the browser I get this, the screen size was a 240x320:
Here is my CSS:
.inputbox{
width: 80%;
border: 1px solid #d4d4d4;
border-bottom-right-radius: 2em;
border-top-right-radius: 2em;
box-shadow: inset 0px 2px 2px #ececec;
display: inline;
padding: 8px;
font-size: 100%;
margin-top: 0px;
margin-bottom: 1%;
}
.labelbox{
border-bottom-left-radius:2em;
border-top-left-radius: 2em;
padding: 8px;
display: block;
border: 1px solid #d4d4d4;
background: #e9f939; /* Old browsers */
padding-right: 5px;
color:black;
float:left;
width:17.5%;
text-align: center;
}
Here is my HTML:
<label class="labelbox" for="textareacontactus">Enter Title*</label>
<input type="text" class="inputbox" data-role="none" ng-model="searchtitle" name="searchtitle" id="searchtitle" required>
<label class="labelbox" for="searchauthor">Enter Author</label>
<input type="text" class="inputbox" data-role="none" name="searchauthor" id="searchauthor">
<label class="labelbox" for="searchpublisher">Enter Publisher</label>
<input type="text" class="inputbox" data-role="none" name="searchpublisher" id="searchpublisher">
<label class="labelbox" for="searchedition">Enter Edition</label>
<input type="text" class="inputbox" data-role="none" name="searchedition" id="searchedition" ng-model="searchedition" ng-pattern="/^[0-9]+$/">
Now in the CSS I used width but using the %. So I can't see why its doing this? I would assume by using % it will always take up say 20% relative to the screen size because if this was the case then why does it do this on the emulator? What is the best practice to ahieve this responsive design?
You can use media queries such as #media (max-width: 767px)
Another thing you could try is using an HTML table like in this JSFiddle I made from your existing code: http://jsfiddle.net/ALYxt/
Related
I have the following lines of codes;
<div class="col_full">
<input type="text" id="email" placeholder="Email" name="email" value="<?=(#isset($_COOKIE['ll1']) ? $_COOKIE['ll1'] : '')?>" class="form-control not-dark" />
</div>
<div class="col_full">
<input type="password" placeholder="Password" id="password" name="password" value="<?=(#isset($_COOKIE['ll2']) ? $_COOKIE['ll2'] : '')?>" class="form-control not-dark" />
</div>
As you can see they have the same class name. They have different ids but css code for both of them are the same as follows:
#email{
font-size: 20px;
background-color: rgba(255,255,255,0.1);
height: 50px;
width: 100%;
border: rgba(255,255,255,0.1);
border-radius: 10px;
color: #FFFFFF;
}
#password{
font-size: 20px;
background-color: rgba(255,255,255,0.1);
height: 50px;
width: 100%;
border: rgba(255,255,255,0.1);
border-radius: 10px;
color: #FFFFFF;
}
On chrome and firefox, they have the same appearance but when I open the page on edge, the password field has a different kind of design.
Firefox and chrome view is like in this screenshot https://i.ibb.co/tXnXmZq/chromefirefox.png
Edge is like this https://i.ibb.co/JscdTnC/edge.png
I don't understand why this happens and I don't know how to solve it.
Not all browsers support RGBA format try using rgb format
I would like the font size for my form label and input fields to scale down from 18px to 10px when the browser width reaches 1460px or less.
I read that it is not possible to get fonts to automatically 'scale down' as such when the browser width decreases, and that I would need to use media queries instead.
Therefore I have put a media query at the top of my style tags asking the font size for my label and input to display at 10px when the screen size is 1460px, but it doesn't seem to work. The rest of my code is working fine however, so it must be something to do with the way I am coding my media query.
If someone could offer some help that would be much appreciated.. my code is pasted below.
#media only screen and (max-width: 1460px) {
label input {
font-size: 10px;
}
}
* {
box-sizing: border-box;
}
input[type=text],
select {
width: 95%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
resize: vertical;
transition: 0.3s;
outline: none;
font-family: Typ1451-Medium;
font-size: 18px;
margin: 7px;
}
input[type=text]:focus {
border: 1.25px solid #ea0088;
}
label {
padding: 21px 12px 12px 12px;
margin-left: 5px;
display: inline-block;
font-family: Typ1451-Medium;
font-size: 18px;
color: #999;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: 2.5% 20% 0 20%;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.left,
.right {
width: 50%;
}
form {
display: flex;
}
<div class="container">
<form action="signin.php" method="post">
<div class="left">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="* Please complete">
</div>
</div>
</div>
<div class="right">
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="* Please complete">
</div>
</div>
</div>
</form>
</div>
Your selector — label input — doesn't match any elements in your HTML.
None of your input elements are descendants of your label elements.
Perhaps you meant label, input to select label elements and input elements. If so, then it still wouldn't work because you define the input font-size with a more specific selector later on (and the most specific selector wins the cascade) and the label in a similar way (it doesn't have a more specific selector, but when selectors are equal, the last one wins the cascade).
Actually, you CAN scale fonts up or down with the viewport size. There is a method with calc() and vw units:
Basically you do something like font-size: 3vw and then set max and min font sizes.
Here is a link to the calculation on Smashing Magazine. The rest of the article is pretty interesting, too.
You can extend this even further and optimize the font size with media queries.
Have fun! :)
That. How can i align this button with the inputs. I try with percentage but only work in a specific screen. And I am using flexbox in this case, i dont know if is that
.Contact-form{
display: flex;
align-items: center;
flex-direction: column;
padding: 1em;
width: 45%;
}
.Contact-input{
width: 90%;
padding: .9em;
border: 0;
}
.Contact-input:focus{
outline: none;
}
.btn{
width: 100%;
background-color: #da2929;
box-shadow: 0px 8px 1px #671212;
color: white;
font-size: 1.5em;
font-weight: 700;
padding: .5em;
}
<form action="" class="Contact-form">
<input type="text" placeholder="Nombre" class="Contact-input" required="true">
<input type="text" placeholder="Apellido" class="Contact-input">
<input type="email" placeholder="correo#ejemplo.com" class="Contact-input" required="true">
<input type="submit" value="Subscribeme" class="Contact-input btn">
</form>
Assuming your input button is .btn, it carries a width of 100% while your text inputs carry a width of 90%, which is why there is a discrepancy.
You could handle this two ways
1) remove the width declarations entirely from .btn and .Contact-input (which would allow them both to take up the full 100% width), or
2) set both elements explicitly to have the same width
I solved this by adding box-sizing: border-box;on .Contact-input. I'll probably need to add the necessary prefixes for each browser.
I am currently making a website and the sign up page requires:
- first name
- last name
- username
- email
- password
- retype password
I need the first name and last name inputs to be side by side and small while the others below them are approximately twice the width.
Like this:
Name
+-----------+ +-----------+
| first | | last |
+-----------+ +-----------+
Email
+----------------------------+
| |
+----------------------------+
I am extremely opposed to using px and absolutely need to use % for the widths.
I cannot make the small inputs 50% and the large ones 100% because the space in between the two small ones is not accounted for, you know?
I'm talking about this space:
Name
+-----------+ +-----------+
| first |<-->| last |
+-----------+ +-----------+
So that is why I can't use 50% for small ones and 100% for large ones!
Any help is greatly appreciated!
Simple do this:
call the small ones : half
.first {margin-left: 0 !important; clear: left;}
.full {width:100%}
.half {width: 48%;}
.half {float: left; margin-left: 2%;}
<div class="first half">First Name</div>
<div class="half">Last Name input</div>
<div class="full">Email Input</div>
As you can see I used margin % to make the spacing...which thats how I made 48% -2%(you can do whatever you like as long as it equals..).
I made a class called .first to make things look right (you can use jquery to create this an auto class).
Heres a Fiddle:
FIDDLE THAT
Hope this helps you.
Here's a Fiddle
<form>
<input name="firstname" type="text" placeholder="First Name" class="small left"/>
<input name="lastname" type="text" placeholder="Last Name" class="small"/>
<input name="username" type="text" placeholder="User Name" class="big"/>
<input name="email" type="text" placeholder="E-mail" class="big"/>
<input name="password" type="password" placeholder="Password" class="big"/>
<input name="rpassword" type="password" placeholder="Repeat Password" class="big"/>
<button name="submit" type="">Sign Up</button>
</form>
form {
background: #555;
width: 350px;
height: 300px;
text-align: center;
padding: 30px 15px;
border-radius: 10px;
}
button {
background: #04a9e8;
position: relative;
margin: 25% auto;
width: 140px;
height: 24px;
border: 1px solid #444;
letter-spacing: 1px;
font-weight: bold;
color: #fff;
border-radius: 4px;
}
button:hover {
background: #02b9fc;
}
.small,
.big {
background: #f5f5f5;
height: 22px;
padding-left: 4px;
margin-bottom: 12px;
border: 1px solid #444;
}
.small:focus,
.big:focus {
background: #fff;
outline: none;
border: 1px solid #0296cc;
box-shadow: 0 0 2px 0 #0296cc;
}
.small {
width: 45.5%;
}
.big {
width: 98.1%;
}
.left {
margin-right: 15px;
}
if you apply 100% with on input element it will overflow the div box because input element has some default padding, for perfect solution you should use this:
Your CSS:
input{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
}
.clearfix { clear: both; }
.first, .last{ width: 48%; }
.first{ float: left; }
.last{ float: right; }
.email{ width: 100%;}
Your HTML:
<div class="clearfix">
<label>Name</label><br>
<input type="text" class="first">
<input type="text" class="last">
</div>
<div class="clearfix">
<label>Email</label><br>
<input type="text" class="email">
</div>
You can checkout this page to know how to align layout with float - http://www.tutorialrepublic.com/css-tutorial/css-alignment.php
I have a search box like below and i am using bootstrap to give a flexible layout. How can use a design like below and make sure i can get a stretchable search box.
You'd need a container to put your input box in, and put a front and end div to it. Depending on browser compatibility you might want to add a few more div's to make sure your input box is shown properly in browsers like IEX7/8 though.
So you'd have the following:
<form class="searchbox">
<input type="text" class="text" />
<input type="submit" class="submit" />
</form>
Accompanied by the following example CSS
form.searchbox { background:url(leftside_image.gif) 0 0 no-repeat; padding-left:15px; }
form.searchbox input.text { border:none; border-top:1px solid #999; border-bottom:1px solid #999; height:25px; line-height:25px; padding:0 5px; }
form.searchbox input.submit { background:url(rightside_image.gif); }
Add your Html part like this
<div class="searchbox">
<input class="lightsearch" type="text" name="s" onfocus="doClear(this)" value="">
</div>
css part, download a search box image and replace it with the name
.searchbox input.lightsearch {
background: url("images/lightsearch.png") no-repeat scroll 0 0 transparent;
border: 0 none;
color: #575757;
font-size: 11px;
height: 19px;
margin-top: 24px;
padding: 2px 5px 2px 24px;
width: 170px;
}