I'm trying to create a login page in HTML.
no matter what i do, the checkbox and its text are not aliening together in a same line.
I want it to look like that: "[] text" instead of:
"[](going down a line) text".
I tried a lot of suggestions i saw in similar posts but nothing seems to works.
This is my code:
* {
box-sizing: border-box;
}
*:focus {
outline: none;
}
body {
font-family: Arial;
background-color: #3498DB;
padding: 50px;
}
.login {
margin: 20px auto;
width: 300px;
}
.login-screen {
background-color: #FFF;
padding: 20px;
border-radius: 5px
}
.app-title {
text-align: center;
color: #777;
}
.login-form {
text-align: center;
}
.control-group {
margin-bottom: 10px;
}
input {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
transition: border .5s;
}
input:focus {
border: 2px solid #3498DB;
box-shadow: none;
}
.btn {
border: 2px solid transparent;
background: #3498DB;
color: #ffffff;
font-size: 16px;
line-height: 25px;
padding: 10px 0;
text-decoration: none;
text-shadow: none;
border-radius: 3px;
box-shadow: none;
transition: 0.25s;
display: block;
width: 250px;
margin: 0 auto;
}
.btn:hover {
background-color: #2980B9;
}
.errorMsg{
font-size: 12px;
color: red;
}
.LabeledCheckboxGroup label, .LabeledCheckboxGroup input {
float: none; /* if you had floats before? otherwise inline-block will behave differently */
display: inline-block;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
<!--<script src="script/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">-->
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body>
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Gridler</h1>
</div>
<div class="login-form">
<div class="control-group">
<input type="text" class="login-field" value="" placeholder="username" id="login-name">
<label class="login-field-icon fui-user" for="login-name"></label>
<input type="checkbox" checked name ="IsHuman"> Human Player
</div>
<a class="btn btn-primary btn-large btn-block" href="#" onclick="process()">login</a>
<!--errorMsg below will later be filed with script and ajax to show a msg when a name is already exist-->
<p class="errorMsg" href="#"></p>
</div>
</div>
</div>
</body>
</html>
Thanks,
Maor
Put the checkbox and its text inside a div.
Remove the width property from the checkbox.
Move the text into its own label.
set display: inline-block for both the checkbox and the label.
* {
box-sizing: border-box;
}
*:focus {
outline: none;
}
body {
font-family: Arial;
background-color: #3498DB;
padding: 50px;
}
.login {
margin: 20px auto;
width: 300px;
}
.login-screen {
background-color: #FFF;
padding: 20px;
border-radius: 5px
}
.app-title {
text-align: center;
color: #777;
}
.login-form {
text-align: center;
}
.control-group {
margin-bottom: 10px;
}
input {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
width: auto;
padding: 10px 0;
transition: border .5s;
}
input:focus {
border: 2px solid #3498DB;
box-shadow: none;
}
.btn {
border: 2px solid transparent;
background: #3498DB;
color: #ffffff;
font-size: 16px;
line-height: 25px;
padding: 10px 0;
text-decoration: none;
text-shadow: none;
border-radius: 3px;
box-shadow: none;
transition: 0.25s;
display: block;
width: 250px;
margin: 0 auto;
}
.btn:hover {
background-color: #2980B9;
}
.errorMsg{
font-size: 12px;
color: red;
}
.LabeledCheckboxGroup label, .LabeledCheckboxGroup input {
float: none; /* if you had floats before? otherwise inline-block will behave differently */
display: inline-block;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
<!--<script src="script/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">-->
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body>
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Gridler</h1>
</div>
<div class="login-form">
<div class="control-group">
<input type="text" class="login-field" value="" placeholder="username" id="login-name">
<label class="login-field-icon fui-user" for="login-name"></label><br/>
<input type="checkbox" checked name ="IsHuman"> Human Player
</div>
<a class="btn btn-primary btn-large btn-block" href="#" onclick="process()">login</a>
<!--errorMsg below will later be filed with script and ajax to show a msg when a name is already exist-->
<p class="errorMsg" href="#"></p>
</div>
</div>
</div>
</body>
</html>
Add
input.login-field {
display: block;
margin: 0 auto;
}
You've set the width for ALL inputs to 250px simply change
input {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
transition: border .5s;
}
To
#login-name {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
transition: border .5s;
}
I have edited your code snippet, please have a look.
* {
box-sizing: border-box;
}
*:focus {
outline: none;
}
body {
font-family: Arial;
background-color: #3498DB;
padding: 50px;
}
.login {
margin: 20px auto;
width: 300px;
}
.login-screen {
background-color: #FFF;
padding: 20px;
border-radius: 5px
}
.app-title {
text-align: center;
color: #777;
}
.login-form {
text-align: center;
}
.control-group {
margin-bottom: 10px;
}
input {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
transition: border .5s;
}
input:focus {
border: 2px solid #3498DB;
box-shadow: none;
}
input[type="checkbox"]
{
width: 30px;
}
.checkbox {
text-align: left;
font-size: 14px;
margin-top: 5px;
}
.checkbox label {
vertical-align: top;
}
.btn {
border: 2px solid transparent;
background: #3498DB;
color: #ffffff;
font-size: 16px;
line-height: 25px;
padding: 10px 0;
text-decoration: none;
text-shadow: none;
border-radius: 3px;
box-shadow: none;
transition: 0.25s;
display: block;
width: 250px;
margin: 0 auto;
}
.btn:hover {
background-color: #2980B9;
}
.errorMsg{
font-size: 12px;
color: red;
}
.LabeledCheckboxGroup label, .LabeledCheckboxGroup input {
float: none; /* if you had floats before? otherwise inline-block will behave differently */
display: inline-block;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
<!--<script src="script/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">-->
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body>
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Gridler</h1>
</div>
<div class="login-form">
<div class="control-group">
<input type="text" class="login-field" value="" placeholder="username" id="login-name">
<label class="login-field-icon fui-user" for="login-name"></label>
<div class="checkbox">
<input type="checkbox" checked name ="IsHuman"> <label>Human Player</label>
</div>
</div>
<a class="btn btn-primary btn-large btn-block" href="#" onclick="process()">login</a>
<!--errorMsg below will later be filed with script and ajax to show a msg when a name is already exist-->
<p class="errorMsg" href="#"></p>
</div>
</div>
</div>
</body>
</html>
Related
I'm brand new to HTML and CSS. I'm trying to center two form buttons. Here is my code:
* {
font-family: arial, sans-serif;
}
body {
display: flex;
align-items: column;
}
.buttons {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
display: inline-block;
}
.search_area {
display: flex;
color: rgba(0, 0, 0, .87);
border: 1px solid #ddd;
width: 100%;
height: 34px;
font-size: 16px;
border-radius: 25px;
}
nav {
display: flex;
margin-right: 30px;
margin-top: 15px;
}
.search_box {
text-align: center;
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Google</title>
<link rel="stylesheet" href="google.css">
</head>
<body>
<nav>
Image Search
Advanced Search
</nav>
<form class="search" action="https://www.google.com/search">
<img id="logo" src="logo.png" alt="Google logo">
<div>
<input name="q" type="text" class="search_area">
</div>
<input type="submit" value="Search Google" class="buttons">
<input type="submit" value="I'm Feeling Lucky" class="buttons">
</form>
</body>
</html>
As you can see, the two buttons beneath the search bar are justified to the left. I thought that text-align: center is the solution. But, this doesn't seem to work.
How do I get these two buttons to center on the screen?
Thanks in advance!
A sample update:
<html lang="en"><head>
<title>Google</title>
<link rel="stylesheet" href="google.css">
</head>
<body>
<nav>
Image Search
Advanced Search
</nav>
<form class="search" action="https://www.google.com/search">
<div style="
"><img id="logo" src="logo.png" alt="Google logo" style=""></div>
<div style="">
<div style="display: flex;align-content: center;">
<input name="q" type="text" class="search_area">
</div>
<div style="">
<input type="submit" value="Search Google" class="buttons">
<input type="submit" value="I'm Feeling Lucky" class="buttons">
</div>
</div>
</form>
</body></html>
CSS:
*{
font-family: arial, sans-serif;
}
body {
/*display: flex;
align-items: column;*/
}
.buttons {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
display: inline-block;
}
.search_area {
display: flex;
color: rgba(0, 0, 0, .87);
border: 1px solid #ddd;
width: 100%;
height: 34px;
font-size: 16px;
border-radius: 25px;
}
nav {
display: flex;
margin-right: 30px;
margin-top: 15px;
}
form{
display: table;
margin-left: auto;
margin-right: auto;
}
.search_box {
text-align: center;
display: block;
}
Use this CSS code:
Just paste it and see the changes.
I have commented the body section and it worked.
*{
font-family: arial, sans-serif;
}
body {
/*display: flex;
align-items: column;*/ /*I have commented the body CSS lines*/
}
.buttons {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
display: inline-block;
}
.search_area {
display: flex;
color: rgba(0, 0, 0, .87);
border: 1px solid #ddd;
width: 100%;
height: 34px;
font-size: 16px;
border-radius: 25px;
}
nav {
display: flex;
margin-right: 30px;
margin-top: 15px;
}
form{
display: table;
margin-left: auto;
margin-right: auto;
}
.search_box {
text-align: center;
display: block;
}
In your body tags don't use display: flex because when you used display flex then text-align: center wouldn't work. In your form tag you have a .search class. for centerizing i used .search { margin: 0 auto; width: 50%}
This is HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Google</title>
<link rel="stylesheet" href="google.css">
</head>
<body>
<nav>
Image Search
Advanced Search
</nav>
<form class="search" action="https://www.google.com/search">
<img id="logo" src="logo.png" alt="Google logo">
<div>
<input name="q" type="text" class="search_area">
</div>
<div class="button">
<input type="submit" value="Search Google" class="buttons">
<input type="submit" value="I'm Feeling Lucky" class="buttons">
</div>
</form>
</body>
</html>
And here is Css:
*{
font-family: arial, sans-serif;
}
/* body{display: flex;align-items: column;} */
.buttons {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
display: inline-block;
}
.button{
text-align: center;
}
.search_area {
color: rgba(0, 0, 0, .87);
border: 1px solid #ddd;
width: 100%;
height: 34px;
font-size: 16px;
border-radius: 25px;
}
.search{
margin: 0 auto;
width: 50%;
}
nav {
display: flex;
margin-right: 30px;
margin-top: 15px;
}
.search_box {
text-align: center;
display: block;
}
This question already has answers here:
How to remove margin space around body or clear default css styles
(7 answers)
Closed 1 year ago.
The problem
When I run my code (shown later), There is a small indent on the left side of my code. I tried making the window smaller to see if it was just because the window was too big, but no luck. I also tried removing all margin and padding that I could find that might of been the cause, but as you may have guessed, no luck. I also tried making my footer bigger to cover up the indent, but that didn't work.
Questions
Why is there an indent on the side?
How can I fix the indent?
If there is in indent on the left side, why is there no indent on the right side?
code
body {
font-family: "Lato", sans-serif;
background: #0f0f0f;
}
.messages {
color: #fff;
bottom:0;
}
h1 {
color: #fff;
text-align: center;
}
h2 {
color: #fff;
padding-left: 25px;
}
.main {
margin-left: 160px;
font-size: 20px;
padding: 0px 10px;
}
.main p {
color: #fff;
padding-left: 25px;
}
.main a {
text-decoration: none;
color: #fff;
}
.main a:hover {
color: #aaaaaa;
}
.topnav {
overflow: hidden;
background-color: #0a0a0a;
}
input {
background-color: #000000;
color: #fff;
border: 2px solid #fff;
height: 25px;
border-radius: 5px;
font-size: 20px;
margin-top: 7.5px;
}
.topnav a {
float: left;
color: #818181;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
color: white;
cursor: default;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
padding-bottom: 10px;
text-align: center;
background-color: #505050;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="topnav">
Back
<input id="search" type="text" placeholder="search for a member..." autocomplete="off">
</div>
<div class="main">
</div>
<div class="footer">
<input type="text" name="Message" placeholder="Leave a message...">
</div>
</body>
</html>
The <body> has a default margin: 8px from the user agent stylesheet. If you add margin: 0 auto to the body, then that left space on your footer will go away.
body {
font-family: "Lato", sans-serif;
background: #0f0f0f;
margin: 0 auto;
}
.messages {
color: #fff;
bottom:0;
}
h1 {
color: #fff;
text-align: center;
}
h2 {
color: #fff;
padding-left: 25px;
}
.main {
margin-left: 160px;
font-size: 20px;
padding: 0px 10px;
}
.main p {
color: #fff;
padding-left: 25px;
}
.main a {
text-decoration: none;
color: #fff;
}
.main a:hover {
color: #aaaaaa;
}
.topnav {
overflow: hidden;
background-color: #0a0a0a;
}
input {
background-color: #000000;
color: #fff;
border: 2px solid #fff;
height: 25px;
border-radius: 5px;
font-size: 20px;
margin-top: 7.5px;
}
.topnav a {
float: left;
color: #818181;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
color: white;
cursor: default;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
padding-bottom: 10px;
text-align: center;
background-color: #505050;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="topnav">
Back
<input id="search" type="text" placeholder="search for a member..." autocomplete="off">
</div>
<div class="main">
</div>
<div class="footer">
<input type="text" name="Message" placeholder="Leave a message...">
</div>
</body>
</html>
Maybe this is the solution as I understood your problem. So you want that there should be no spacing between your content and browser borders to it.
My try that I think should help you
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
background: #0f0f0f;
margin: 0px;
}
.messages {
color: #fff;
bottom:0;
}
h1 {
color: #fff;
text-align: center;
}
h2 {
color: #fff;
padding-left: 25px;
}
.main {
margin-left: 160px;
font-size: 20px;
padding: 0px 10px;
}
.main p {
color: #fff;
padding-left: 25px;
}
.main a {
text-decoration: none;
color: #fff;
}
.main a:hover {
color: #aaaaaa;
}
.topnav {
overflow: hidden;
background-color: #0a0a0a;
}
input {
background-color: #000000;
color: #fff;
border: 2px solid #fff;
height: 25px;
border-radius: 5px;
font-size: 20px;
margin-top: 7.5px;
}
.topnav a {
float: left;
color: #818181;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
color: white;
cursor: default;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
padding-bottom: 10px;
text-align: center;
background-color: #505050;
}
</style>
</head>
<body>
<div class="topnav">
Back
<input id="search" type="text" placeholder="search for a member..." autocomplete="off">
</div>
<div class="main">
</div>
<div class="footer">
<input type="text" name="Message" placeholder="Leave a message...">
</div>
</body>
</html>
I need to make the button and submit input type in 1 line and dont know how to do it.
I tried by changing display to inline but it doesnt work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animated Login</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<form class ="box" action = "index.html" method="post">
<h1>Login</h1>
<input type="username" name="" placeholder="Username">
<input type="password" name="" placeholder="Passeword">
<input type="submit" name="" value="Login">
<input type="button" name="" value="Register">
</form>
</body>
</html>
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box{
width: 300px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1{
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type = "username"],.box input[type = "password"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type = "username"]:focus,.box input[type = "password"]:focus{
width: 280px;
border-color: #2ecc71;
}
.box input[type = "submit"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "submit"]:hover{
background: #2ecc71;
}
.box input[type = "button"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "button"]:hover{
background: #2ecc71;
}
At first try to make your question readable. Follow the rules here https://stackoverflow.com/help/how-to-ask.
I am assuming you need col-md-6 from bootstrap. Try this-
<div class='col-md-6'>
<input type="submit" name="" value="Login">
</div>
<div class='col-md-6'>
<input type="button" name="" value="Register">
</div>
You just need to remove display: block property from both of your button style and give width to the form of width:450px will make button side by side to each other, it is necassary to have form width of 450px other wise width lesser than 450px will make button one after another and will not make side by side.
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 450px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="username"],
.box input[type="password"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="username"]:focus,
.box input[type="password"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box input[type="button"] {
border: 0;
background: none;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="button"]:hover {
background: #2ecc71;
}
<form class="box" action="index.html" method="post">
<h1>Login</h1>
<input type="username" name="" placeholder="Username">
<input type="password" name="" placeholder="Passeword">
<input type="submit" name="" value="Login">
<input type="button" name="" value="Register">
</form>
I am trying to fix the design error that I am facing with my log in page.
I have been trying to center the username and password form input field but it doesn't work. The icon is also misaligned with the username and password field.
I have tried altering the CSS but it just wouldn't center.
Below are my HTML and CSS codes:
body {
margin: 0;
padding: 0;
font-family: 'Corbel', sans-serif;
color: #FFFFFF
}
/*CSS for login.html & signup.html*/
#login-container {
background-color: #FFFFFF;
position: relative;
top: 15%;
margin: auto;
width: 340px;
height: 445px;
text-align: center;
}
#login-container-title {
position: relative;
background-color: #FFAE42;
width: 100%;
padding: 20px 0px;
font-size: 22px;
font-weight: bold;
}
#register-container {
background-color: #FFFFFF;
position: relative;
top: 15%;
margin: auto;
width: 340px;
height: 500px;
text-align: center;
}
#register-container-title {
position: relative;
background-color: #FFAE42;
width: 100%;
padding: 20px 0px;
font-size: 22px;
font-weight: bold;
}
.register {
margin: auto;
padding: 16px 0;
text-align: center;
margin-top: 30px;
width: 85%;
border-top: 1px solid #696969;
}
#register-link {
margin-top: 15px;
padding: 15px 35px;
background: #FFAE42;
color: #FFFFFF;
font-size: 15;
font-weight: bold;
border: 0 none;
cursor: pointer;
border-radius: 3px;
}
#register-required {
margin: auto;
width: 260px;
background-color: #ededed;
padding: 8px 0px;
color: black;
margin-top: 25px;
}
}
.input {
margin: auto;
width: 260px;
background-color: #ededed;
padding: 8px 0px;
margin-top: 25px;
}
.input-addon {
position: relative;
top: -2px;
float: left;
background-color: #ededed;
border: 1px solid #ededed;
padding: 4px 8px;
color: #757575;
border-right: 1px solid #757575;
}
input[type=checkbox] {
cursor: pointer;
}
input[type=text] {
color: #696969;
margin: 0;
background-color: #ededed;
font-size: 15;
border: 1px solid #ededed;
padding: 6px 0px;
}
input[type=password] {
color: #696969;
margin: 0;
background-color: #ededed;
font-size: 15;
border: 1px solid #ededed;
padding: 6px 0px;
}
/*to remove blue block while in focus */
*:focus {
outline: none;
}
input[type=submit] {
padding: 15px 35px;
background: #FFAE42;
color: #FFFFFF;
font-size: 15;
font-weight: bold;
border: 0 none;
cursor: pointer;
margin-top: 35px;
}
/*CSS for main.html*/
.sidebar {
margin: auto;
padding: 0px;
width: 200px;
background-color: #FFFFFF;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #FFAE42;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
.content {
margin-left: 250px;
padding: 30px 16px;
height: 100%;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
/* Alert message box */
/* The alert message box */
.alert {
padding: 5px;
background-color: green;
color: white;
margin-bottom: 15px;
}
<html>
<head>
<meta charset="UTF-8">
<title>Phisherman - Login</title>
<meta name="description" content="Phisherman - Login/Register">
<!--Meta name=viewport for mobile phone scaling-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
body {
background-image: url('backgroundimg.png');
}
</style>
</head>
<body>
<div id="login-container">
<div id="login-container-title">
Login
</div>
<form method ="POST" action="auth.php">
<div class="input">
<div class="input-addon">
<i class="material-icons">face</i>
</div>
<input id="username" name="username" placeholder="Username" type="text" required class="validate" autocomplete="off">
</div>
<div class="input">
<div class="input-addon">
<i class="material-icons">vpn_key</i>
</div>
<input id="password" name="password" placeholder="Password" type="password" required class="validate" autocomplete="off">
</div>
<input type="submit" name="submit" value="Log In" />
</form>
<div class="register">
<span style="color: #657575">Don't have an account yet?</span>
<button id="register-link">Register here</button>
</div>
</div>
</div>
</body>
</html>
Use flexbox
body {
margin: 0;
padding: 0;
font-family: 'Corbel', sans-serif;
color: #FFFFFF
}
/*CSS for login.html & signup.html*/
#login-container {
background-color: #FFFFFF;
position: relative;
top: 15%;
margin: auto;
width: 340px;
height: 445px;
text-align: center;
}
#login-container form {
display: flex;
flex-flow: column wrap;
}
#login-container-title {
position: relative;
background-color: #FFAE42;
width: 100%;
padding: 20px 0px;
font-size: 22px;
font-weight: bold;
}
#register-container {
background-color: #FFFFFF;
position: relative;
top: 15%;
margin: auto;
width: 340px;
height: 500px;
text-align: center;
}
#register-container-title {
position: relative;
background-color: #FFAE42;
width: 100%;
padding: 20px 0px;
font-size: 22px;
font-weight: bold;
}
.register {
margin: auto;
padding: 16px 0;
text-align: center;
margin-top: 30px;
width: 85%;
border-top: 1px solid #696969;
}
#register-link {
margin-top: 15px;
padding: 15px 35px;
background: #FFAE42;
color: #FFFFFF;
font-size: 15;
font-weight: bold;
border: 0 none;
cursor: pointer;
border-radius: 3px;
}
#register-required {
margin: auto;
width: 260px;
background-color: #ededed;
padding: 8px 0px;
color: black;
margin-top: 25px;
}
.input {
display: flex;
justify-content: center;
background-color: #ededed;
padding: 8px 0px;
margin: 25px auto 0;
width: 100%;
}
.input-addon {
position: relative;
top: 0;
float: left;
background-color: #ededed;
border: 1px solid #ededed;
padding: 6px 10px;
color: #757575;
border-right: 1px solid #757575;
margin-right: auto;
}
input[type=checkbox] {
cursor: pointer;
}
input[type=text] {
color: #696969;
margin: 0;
background-color: #ededed;
font-size: 15px;
border: 1px solid #ededed;
padding: 10px;
width: 100%;
}
input[type=password] {
color: #696969;
margin: 0;
background-color: #ededed;
font-size: 15px;
border: 1px solid #ededed;
padding: 10px;
width: 100%;
}
/*to remove blue block while in focus */
*:focus {
outline: none;
}
input[type=submit] {
padding: 15px 35px;
background: #FFAE42;
color: #FFFFFF;
font-size: 15;
font-weight: bold;
border: 0 none;
cursor: pointer;
margin-top: 35px;
}
/*CSS for main.html*/
.sidebar {
margin: auto;
padding: 0px;
width: 200px;
background-color: #FFFFFF;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #FFAE42;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
.content {
margin-left: 250px;
padding: 30px 16px;
height: 100%;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
/* Alert message box */
/* The alert message box */
.alert {
padding: 5px;
background-color: green;
color: white;
margin-bottom: 15px;
}
<html>
<head>
<meta charset="UTF-8">
<title>Phisherman - Login</title>
<meta name="description" content="Phisherman - Login/Register">
<!--Meta name=viewport for mobile phone scaling-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
body {
background-image: url('backgroundimg.png');
}
</style>
</head>
<body>
<div id="login-container">
<div id="login-container-title">
Login
</div>
<form method="POST" action="auth.php">
<div class="input">
<div class="input-addon">
<i class="material-icons">face</i>
</div>
<input id="username" name="username" placeholder="Username" type="text" required class="validate" autocomplete="off">
</div>
<div class="input">
<div class="input-addon">
<i class="material-icons">vpn_key</i>
</div>
<input id="password" name="password" placeholder="Password" type="password" required class="validate" autocomplete="off">
</div>
<input type="submit" name="submit" value="Log In" />
</form>
<div class="register">
<span style="color: #657575">Don't have an account yet?</span>
<button id="register-link">Register here</button>
</div>
</div>
</div>
</body>
</html>
I am trying to make a note website. But I noticed that there is a differents between Firefox design tool and my own iphone
But when I test it on my mobile device (iphone 7+) I am getting a other result
I hope someone knows the answer to my problem.
Thanks in advance.
PS..
I used https://howchoo.com/g/mte2zgrhmjf/how-to-access-a-website-running-on-localhost-from-a-mobile-phone to acces the website on my phone
<style>
html{
width: 100vw;
}
/*thead a:link{
padding-left: 5px;
padding-top: 5px;
padding-bottom: 0px;
}*/
nav{
display: none;
}
thead a:link {
color: #262626;
padding: 13px 1px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.note{
/*display: none;*/
}
.page-header{
left: 50%;
}
h1{
color:#262626;
}
body{
text-align: center;
font-family: Arial;
}
ul {
text-align: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #e6e6e6;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
nav a:link {
background-color: #e6e6e6;
color: #262626;
padding: 5px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
li {
float: left;
}
/*dropdown nav*/
.dropbtn {
background-color: #4CAF50;
color: white;
/*padding: 16px;*/
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
text-align: left;
position: relative;
display: block;
width: 100%;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
/*min-width: 160px;*/
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 100%;
}
#bars{
width: 22px;
font-size: 25px;
}
.dropdown-content a {
text-align: left;
color: black;
padding: 10px 10px 10px 10px;
text-decoration: none;
display: block;
width: 548px;
}
.dropdown-content a:hover {
background-color: #009fe3;
color: white;
}
.dropdown-content .active {
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #009fe3;
}
/*dropdown nav end*/
#text{
display: none;
}
.topnav-right a{
height: 25px;
}
.topnav-right {
float: right;
list-style-type: none;
}
li a {
display: block;
color: #262626;
text-align: center;
padding: 12px 16px;
text-decoration: none;
}
li a:hover {
background-color: #009fe3;
color: white;
}
.active:hover{
background-color:#009fe3;
}
.active {
background-color: #262626;
color: white;
}
/*form styling*/
.input_form {
width: 90%;
margin: 30px auto;
border-radius: 5px;
padding: 10px;
background: white;
border: 1px solid #262626;
}
.input_form {
color: red;
margin: 0px;
}
.task_input {
border-radius: 5px;
width: 50%;
height: 15px;
padding: 10px;
border: 1px solid #262626;
}
.date_input {
border-radius: 5px;
width: 100px;
height: 15px;
padding: 10px;
border: 1px solid #262626;
}
.add_btn {
cursor: pointer;
height: 39px;
background: white;
color: #262626;
border: 1px solid #262626;
border-radius: 5px;
margin: 5px;
padding: 5px 20px;
}
.add_btn:hover{
background: #009fe3;
color: white;
}
table {
width: 100%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
border-bottom: 1px solid #262626;
height: auto;
}
tr a{
height: auto;
}
th{
height: auto;
}
th, td {
text-align: left;
font-size: 19px;
color: #262626;
}
th, td{
border: none;
height: auto;
padding: 2px;
}
td{
border-left: 1px solid #262626;
border-left: none;
}
tbody a:link {
background-color: white;
color: #262626;
padding: 13px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.select{
display: none;
}
/*complete button*/
.complete{
text-align: center;
width: 10px;
}
.complete a:visited{
color: #262626;
}
.complete a{
color: #262626;
text-decoration: none;
}
.complete a:hover {
background-color: #009fe3;
color: white;
}
/*Delete button*/
.delete{
text-align: center;
width: 10px;
}
.delete a:visited{
color: #262626;
}
.delete a{
color: #262626;
text-decoration: none;
}
.delete a:hover {
background-color: #009fe3;
color: white;
}
.restore{
text-align: center;
width: 10px;
}
.restore a:visited{
color: #262626;
}
.restore a{
color: #262626;
text-decoration: none;
}
.restore a:hover {
background-color: #009fe3;
color: white;
}
/*completeAll button*/
.completeAll a:visited{
color: #262626;
}
.completeAll a:hover {
background-color: #009fe3;
color: white;
}
/*restoreAll button*/
.restoreALL, .restoreALL a:visited{
color: #262626;
}
.restoreALL a:hover {
background-color: #009fe3;
color: white;
}
/*Edit button*/
.edit a:visited{
color: #262626;
}
.edit{
/*text-align: left;*/
display: none;
width: auto;
text-align: center;
}
.edit a:hover{
color:white;
background-color: #009fe3;
}
.timer-off{
color:red;
}
#form3{
display: none;
}
#completed{
display: none;
float: center;
}
#link, #link:visited{
color: red;
float: right;
}
#link1, #link1:visited{
color: #009fe3;
}
#title{
cursor: pointer;
}
/*sort function styling for arrows*/
#up {
display: inline-block;
border: solid #262626;
border-width: 0 3px 3px 0;
padding: 3px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
#down {
display: inline-block;
border: solid #262626;
border-width: 0 3px 3px 0;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
/*search button*/
#myInput {
width: 50%;
font-size: 16px;
margin: 12px;
color: #262626;
padding: 12px 20px 12px 20px;
border: 1px solid #262626;
margin-bottom: 12px;
}
#myInput:focus{
border: 1px solid #009fe3;
}
/*style login page/register page*/
label{
float: left;
color: black;
}
.form-control[type=text], .form-control[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.form-control1[type=text], .form-control1[type=date]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.button {
background-color: #009fe3;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
.button:hover {
opacity: 0.8;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img#randomImage {
width: 40%;
border-radius: 50%;
}
/*form edit.php and login.php */
#form{
margin: auto;
border: 1px solid #ccc;
box-sizing: border-box;
display: table;
width: 50%;
margin: 5% auto 15% auto;
}
/*form index.php*/
#form4{
margin: auto;
border: 1px solid #ccc;
box-sizing: border-box;
display: table;
width: 50%;
}
/*form register.php*/
#form1{
margin: auto;
border: 1px solid #ccc;
box-sizing: border-box;
display: table;
width: 100%;
margin: 1% auto 15% auto;
}
.form-group {
padding: 16px;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img#randomImage {
width: 40%;
border-radius: 50%;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
#form{
/*height: 50%;*/
}
}
.note1{
width: auto;
}
.input_form {
width: 80%;
margin: auto;
border-radius: 5px;
padding: 10px;
background: white;
border: 1px solid #262626;
}
#link2{
font-size: 20px;
font-style: normal;
float: right;
margin: 5px;
}
#link2:visited{
color: #009fe3;
}
#link2:hover{
color: red;
}
.note4{
}
.task p{
font-size: 16px;
}
.date{
float: right;
margin-top: 10px;
width: auto;
}
#media screen and (min-width: 768px) {
.edit{
display: block;
}
nav{
display: block;
}
.date{
float: right;
}
#text{
display: block;
}
.dropdown{
display: none;
}
.note{
height: auto;
display: table-cell;
}
.task_input{
width: 70%;
height: auto;
}
#myInput{
width: 50%;
}
.select{
display: block;
font-size: 19px;
width: auto;
font-family: Arial;
font-weight: bold;
color: #262626;
}
#media screen and (min-width: 992px) {
.input_form p {
color: red;
margin: 0px;
}
.note{
width: auto;
}
.note1{
width: 70%;
max-height: 300px;
}
.task_input {
width: 80%;
height: 15px;
padding: 10px;
border: 1px solid #262626;
}
#myInput{
width: 20%;
}
table {
width: 80%;
}
</style>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="UTF-8">
<title>To-Do</title>
<link rel="icon" href="img/to-do.png">
<img style="display: none;" src="img_avatar2.png" id="randomImage" alt="some image" />
</head>
<body>
<nav>
<ul>
<li title="Home">
<a href="index.php?Notes=Show" class="active">
<i class="material-icons">home</i>
</a>
</li>
<li title="Completed tasks">
<i class="material-icons">done</i>
</li>
<li title="Users">
<a href="index-admin.php">
<i class="material-icons">person</i>
</a>
</li>
<li title="Add Users">
<a href="register.php">
<i class="material-icons">person_add</i>
</a>
</li>
<div class="topnav-right">
<li title="Logout">
<a href="logout.php">
<i class="fa fa-sign-out" style="font-size:25px"></i>
</a>
</li>
</div>
</ul>
</nav>
<div class="dropdown">
<i id="bars" class="fa fa-bars"></i>
<div class="dropdown-content">
<a href="index.php?Notes=Show" class="active">
<i class="material-icons">home</i>
</a>
<i class="material-icons">done</i>
<a href="index-admin.php">
<i class="material-icons">person</i>
</a>
<a href="register.php">
<i class="material-icons">person_add</i>
</a>
<a href="logout.php">
<i class="fa fa-sign-out" style="font-size:25px"></i>
</a>
</div>
</div>
<div class="page-header">
<h1>Hi, <b style="color:#009fe3"> </b>. Welcome.</h1>
</div>
<i style="font-size: 20px; font-style: normal;">Add a task<br>
<!-- form input tasks -->
<div id="form3">
<form method="post" action="index.php?Notes=Show" id="form4">
<i class="material-icons">close</i><br>
<div class="form-group">
<label>Title</label>
<input type="text" maxlength="20" name="task" class="form-control1" placeholder="Title To-Do...">
</div>
<div class="form-group">
<label>Date</label>
<input class="form-control1" type="date" id="dates" name="dates" min="<?php echo $today;?>" value="<?php echo $today;?>">
</div>
<div class="form-group">
<label>Note</label>
<textarea name="note" class="form-control1" rows="10" cols="120" placeholder="Description To-Do..."></textarea><br>
</div>
<div class="form-group">
<button type="submit" name="submit" id="add_btn" class="button">
<i class="fa fa-plus"></i>`
</button>
</div>
</form>
</div>
</form>
<input type="text" id="myInput" autofocus="autofocus" onkeyup="myFunction()" placeholder="Search for anything..." title="Type something to search">
<table id="myTable">
<thead>
<!-- title for table -->
<tr>
<!-- message for no results found -->
<!--<p id="message"></p> -->
<th title="Completed all tasks" class="completeAll">
<a onclick="return checkCompleteAll()" href="#"><i class=material-icons>done</i>ALL</a>
</th>
<th title="Sort By title" id="title" onclick="sortTable(0)">Title
<i id="up"></i>
<i id="down"></i></th>
<th><select class="select" name="note" onchange="location = this.value;">
<option value="index.php?Notes=Show">Show Notes</option>
<option value="index.php?Notes=Hide">Hide Notes</option>
<option value="index.php?Notes=Hide">Hide Notes</option>
<option value="index.php?Notes=Show">Show Notes</option>
</select></th>
</tr>
</thead>
<tbody>
<!-- table content -->
<tr>
<th title="Complete task" class="complete">
<a onclick="return checkComplete('<?=$row['id'] ?>')" href="#"><i class=material-icons>done</i></a>
</th>
<td class="task" style="width: auto;"><b></p>
</td>
<th title="Edit task" class="edit" style="float: right; $color;">
</th>
<td class="date" >
</td>
</tr>
</tbody>
</table>
</body>
<script src="java.js"></script>
</html>
Does your HTML file have a viewport meta tag in its head? It looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Firefox's mobile editor is likely going to ignore this and automatically adjust the scale of the page.
The iPhone screenshot to me looks like Safari is parsing the page in a manner where it doesn't expect the page to be mobile optimised, so basicslly the pixels aren't being adjusted to the viewing distance of the device.
Another thing to consider is that Firefox and Safari do not use the same underlying technology so there could always be variances in end results. That's why it is best to test your websites on as many browsers as possible, which it seems that you have done by testing on a real mobile device.
To read more about the meta viewport tag see Firefox's documentation (it applies to other browsers, too*)
(*Mozilla typically includes a compatibility table if there is an exception or non-standard behavior)