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;
}
}
Related
This is a simple form with an input field for the email address and an input field for the password. You can enter your email address without a problem, it keeps its size and does not change except for a small change of input background-color when focused.
This is the form
The password however, when focused, changes the mobile version of this site to the desktop version. As soon as you focus on something else, say the email, the desktop site will change back to the mobile version. This does not happen on the chrome DevTools. The problem seems to be only on the mobile version of chrome.
Here you can see that the site changed to the desktop version
I think that it has something to do with how chrome handles the attribute "password". How do I prevent chrome from changing the mobile site to desktop and back, just because of the password?
HTML
<form class="loginform" action="includes/login.inc.php" method="POST">
<h1>Log-in</h1>
<label for="userEmail">Email</label><br>
<input name="userEmail" autocomplete="username" type="text" placeholder="Email"><br>
<label for="userPwd">Wachtwoord</label><br>
<input name="userPwd" type="password" autocomplete="current-password" placeholder="Wachtwoord">
<br>
<input name="onthoudtmij" type="checkbox"><label for="onthoudtmij" style="display: inline-block;">Onthoudt mij</label>
<br>
<input type="submit" name="submit" value="Log-in">
<br>
<br>
<h1>Nog geen account? klik hier!</h1>
<br>
Wachtwoord vergeten? klik hier!
</form>
CSS
#media screen and (max-width: 425px) and (orientation: portrait)
input[type=text], input[type=password], input[type=email], input[type=tel] {
width: auto;
}
input[type=text], input[type=password], input[type=email], input[type=tel] {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid #256578;
}
#media screen and (max-width: 425px) and (orientation: portrait)
p, li, h4, td, label, input, textarea {
font-size: 4.5vw;
padding: 0;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=tel]:focus {
background-color: #c4c4c4;
}
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! :)
I have a button on my website but i want it to be only available on mobile.
How can i hide it from my desktop site?
<div class="pull-right">
<button class="button-menu-mobile open-left">
<i class="ion-navicon"></i>
</button>
<span class="clearfix"></span>
</div>
And here is the css
.button-menu-mobile {
background: transparent;
border: none;
color: #ffffff;
font-size: 21px;
line-height: 60px;
padding: 0px 15px;
Thanks :)
I am attaching a working code snippet, here if you go full screen, you won't be able to see the button.
Working Example
#media(min-width: 900px)
{
.button-menu-mobile
{
display:none;
}
}
<div class="pull-right">
<button class="button-menu-mobile open-left">
<i class="ion-navicon"></i>
</button>
<span class="clearfix"></span>
</div>
You need to use media-queries for this purpose. set min-width according to your need.
#media(min-width: 900px)
{
.button-menu-mobile
{
display:none;
}
}
Code:
#media screen and (min-width: 600px) {
.pull-right {
visibility: hidden;
}
}
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
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.