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.
Related
I have a curious situation when rendering a section of my website using android mobile devices.
The search input field on my website shrinks as soon as the user commences typing and the page seems to break its stylesheet constraints temporarily.
I am perplexed, as this anomaly does not occur in iOS and I cannot seem to produce the bug using any web inspector when in responsive mode.
To replicate the problem:
Open my website shop.php page on your android device.
Open the hamburger nav and type into the search input field.
Any steering would be appreciated as I have looked high and low online to resolve without success.
hamburger nav code - html
<div id="menu-icon">
<span class="first"></span><span class="second"></span><span class="third"></span>
</div>
<nav>
<form class="search" method="get" action="results.php" autocomplete="off">
<div>
<input type="search" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" size="22" maxlength="22" name="searchterm" pattern="[a-zA-Z0-9\s]{0,25}" placeholder="search rowena mae products">
</div>
</form>
<ul>
<?php
get_categories_within_hamburger();
?>
</ul>
</nav>
hamburgernav.css
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
nav {
width: 100%;
/*width: 360px;*/
}
#menu-icon {
top: 18px;
}
nav ul li a {
float: none;
padding: 8px;
display: block;
color: antiquewhite;
text-align: center;
margin-bottom: 20px;
font-size: 16px;
}
.search input {
width: 100%;
background: #FDFBF6;
text-align: center;
font-size: 16px;
height: 38px;
}
}
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! :)
can anyone help me? It seems that the specific font size for small devices (max 320px) is not working. Can anybody help? I also included the HTML & CSS.
My code:
#media all and (max-width: 320px) {
#titleHome {
font-size: 4vw;
}
#titleHome2 {
font-size: 2vw;
}
}
<div class="home-caption">
<div id="titleHome" style="font-size:1.8vw; float:left; margin-left:4.5%; color:#black">Random text<br/> & random text</div>
<div id="titleHome2" style="font-size:1.1vw; float:left; margin-top: 4.8%; color:black">
Random Text
</div>
</div>
This is because the font size defined inline on the HTML will take precedence over the one defined in the stylesheet. Please move all your styles to the stylesheet.
You should move your inline styles out of the HTML and into the CSS.
#titleHome {
font-size: 1.8vw;
float: left;
margin-left: 4.5%;
color: #000;
}
#titleHome2 {
font-size: 1.1vw;
float: left;
margin-top: 4.8%;
color: #000
}
#media all and (max-width: 320px) {
#titleHome {
font-size: 4vw;
}
#titleHome2 {
font-size: 2vw;
}
}
<div class="home-caption">
<div id="titleHome">Random text<br/> & random text</div>
<div id="titleHome2">
Random Text
</div>
</div>
Try to add !important to the end of the font size
#media all and (max-width: 320px){
#titleHome {
font-size: 4vw !important;
}
#titleHome2{
font-size: 2vw !important;
}
<div class="home-caption">
<div id = "titleHome" class="titleHome">Random text<br/> & random text</div>
<div id = "titleHome2" class="titleHome2">Random Text</div>
</div>
Css
.titleHome {
font-size:1.8vw;
margin-left:4.5%;
}
.titleHome2 {
font-size:1.1vw;
margin-top: 4.8%;
}
.titleHome, .titleHome2 {
color:#FFFFFF"
float:left;
#media all and (max-width: 320px){
font-size: 4vw;
}
}
Hope this helps
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
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