I made a login form that's perfectly horizontally centered for wide screens. Somehow, it's not the case with small screens, even though I used the viewport tag and margin: 0 auto;. What's wrong and how can I center it correctly?
html,
body {
width: 100%;
}
body {
text-align: center;
}
fieldset {
border: 1px groove black;
border-radius: 5px;
}
form {
font-family: Segoe UI;
margin: 0 auto;
margin-top: 15%;
width: 27.5%;
}
input {
border: 1px rgb(175, 175, 175) solid;
border-radius: 5px;
font-family: Helvetica;
font-size: 100%;
margin-top: 2.5%;
padding: 1% 0% 1% 0%;
}
legend {
font-size: 150%;
}
button {
background-color: rgb(0, 117, 255);
border: 0px;
border-radius: 5px;
color: white;
cursor: pointer;
transition: background-color 0.15s ease-out;
}
button:hover {
background-color: rgb(0, 83, 255);
transition: background-color 0.15s ease-in;
}
button#submit {
font-size: 100%;
margin-top: 7%;
padding: 2.5% 10% 2.5% 10%;
}
button#signup {
font-size: 100%;
margin-top: 1%;
padding: 0.6% 2.5% 0.6% 2.5%;
}
<!DOCTYPE html>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<form action="background_processing/login_process.php" enctype="multipart/form-data" method="post">
<fieldset>
<legend>Login</legend>
<p>
<label for="username">Username</label><br>
<input type="text" id="username" name="username">
</p>
<p>
<label for="password">Password</label><br>
<input type="password" id="password" name="password">
</p>
<p>
<button type="submit" id="submit">Log in</button>
</p>
</fieldset>
</form><br>
<button id="signup" onclick="window.open('https://google.com/','_self');">Sign up</button>
</body>
</html>
Here's my code: https://jsfiddle.net/gabwvf68
This is your problem area:
fieldset {
border: 1px groove black;
border-radius: 5px;
}
form {
font-family: Segoe UI;
margin: 0 auto;
margin-top: 15%;
width: 27.5%;
}
We can fix it simply by doing:
fieldset {
border: 1px groove black;
border-radius: 5px;
width: 27.5%;
margin: 0 auto;
}
form {
font-family: Segoe UI;
margin-top: 15%;
}
Move the width and margin: 0 auto; to the fieldset.
margin 0 auto; should always go on the block you are trying to center not the parent block.
You form has the width in percent is smaller that the fieldset area. Hence when you resize the window to smaller size it moves right to get the remaining wind of the window. Try giving fix width or the width as much as fieldset element width.
Like below I gave width:55% and it works fine for all window size. If you want the box width as given in the example, try giving it width:300px
html,
body {
width: 100%;
}
body {
text-align: center;
}
fieldset {
border: 1px groove black;
border-radius: 5px;
}
form {
font-family: Segoe UI;
margin: 0 auto;
margin-top: 15%;
width: 55%;
}
input {
border: 1px rgb(175, 175, 175) solid;
border-radius: 5px;
font-family: Helvetica;
font-size: 100%;
margin-top: 2.5%;
padding: 1% 0% 1% 0%;
}
legend {
font-size: 150%;
}
button {
background-color: rgb(0, 117, 255);
border: 0px;
border-radius: 5px;
color: white;
cursor: pointer;
transition: background-color 0.15s ease-out;
}
button:hover {
background-color: rgb(0, 83, 255);
transition: background-color 0.15s ease-in;
}
button#submit {
font-size: 100%;
margin-top: 7%;
padding: 2.5% 10% 2.5% 10%;
}
button#signup {
font-size: 100%;
margin-top: 1%;
padding: 0.6% 2.5% 0.6% 2.5%;
}
<!DOCTYPE html>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<form action="background_processing/login_process.php" enctype="multipart/form-data" method="post">
<fieldset>
<legend>Login</legend>
<p>
<label for="username">Username</label><br>
<input type="text" id="username" name="username">
</p>
<p>
<label for="password">Password</label><br>
<input type="password" id="password" name="password">
</p>
<p>
<button type="submit" id="submit">Log in</button>
</p>
</fieldset>
</form><br>
<button id="signup" onclick="window.open('https://google.com/','_self');">Sign up</button>
</body>
</html>
Your issue lies with the use of the <fieldset> tag which even though the parent form is correctly sized and centred the fieldset child does not display to this size.
One way around this if you do not require the fieldset tag is to use a div with the class fieldset.
You should probably also include a width: 100% attribute to the input fields so that they remain within the input form.
Example
html,
body {
width: 100%;
}
body {
text-align: center;
}
.fieldset {
border: 1px groove black;
border-radius: 5px;
}
form {
font-family: Segoe UI;
margin: 0 auto;
margin-top: 15%;
width: 27.5%;
}
input {
border: 1px rgb(175, 175, 175) solid;
border-radius: 5px;
font-family: Helvetica;
font-size: 100%;
width: 100%;
margin-top: 2.5%;
padding: 1% 0% 1% 0%;
}
legend {
font-size: 150%;
}
button {
background-color: rgb(0, 117, 255);
border: 0px;
border-radius: 5px;
color: white;
cursor: pointer;
transition: background-color 0.15s ease-out;
}
button:hover {
background-color: rgb(0, 83, 255);
transition: background-color 0.15s ease-in;
}
button#submit {
font-size: 100%;
margin-top: 7%;
padding: 2.5% 10% 2.5% 10%;
}
button#signup {
font-size: 100%;
margin-top: 1%;
padding: 0.6% 2.5% 0.6% 2.5%;
}
<!DOCTYPE html>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<form action="background_processing/login_process.php" enctype="multipart/form-data" method="post">
<div class="fieldset">
<legend>Login</legend>
<p>
<label for="username">Username</label><br>
<input type="text" id="username" name="username">
</p>
<p>
<label for="password">Password</label><br>
<input type="password" id="password" name="password">
</p>
<p>
<button type="submit" id="submit">Log in</button>
</p>
</div>
</form><br>
<button id="signup" onclick="window.open('https://google.com/','_self');">Sign up</button>
</body>
</html>
Hope this helps!
your form is actually centered, but in small screen, form content (fieldset, input etc.) kind of overflows your form area. you can visualize this by temporarily adding background-color to the form. In order to fix this, try setting larger width of form for smaller screen. Also, use px value for width instead of %, if possible
Related
I am developing a form which has certain error message when there is an error in the form. My problem is when ever the error message is displayed my form inputs are displayed as i wanted. This is the image which shows the display i want (this is with the error display property being commented out. It was display:none)
But when the display property(display:none) is active the input fields tend to shift their position like this
What should i change in the code to make sure that my text input fields should look somehow like this.
How do i achieve this.
My code is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="/styles/style.css">
<title>Frontend Mentor | Intro component with sign up form</title>
</head>
<body>
<section class="container">
<header>
<h1>Learn to code by watching others</h1>
</header>
<article class="first-para">
<p class="main-paragraph"> See how experienced developers solve <span class="second-line">problems in real-time.
Watching</span>
<span class="third-line">scripted tutorials is great, but</span> understanding how developers think is
<span class="invaluable">invaluable.</span></p>
</article>
<section class="try-box">
<p><span class="try">Try it free 7 days</span> then <br /> $20/mo. thereafter</p>
</section>
<form class="claim-form" action="/">
<input type="text" placeholder="First Name" id="first-name">
<img class='error-img' src="/images/icon-error.svg" alt="error">
<div class="err err-first">First Name cannot be empty</div>
<input type="text" placeholder="Last Name" id="last-name">
<img class='error-img' src="/images/icon-error.svg" alt="error">
<div class="err err-last">Last Name cannot be empty</div>
<input type="email" placeholder="Email Address" id="email">
<img class='error-img' src="/images/icon-error.svg" alt="error">
<div class="err err-email">Looks like this is not an email</div>
<input type="password" placeholder="Password" id="password">
<img class='error-img' src="/images/icon-error.svg" alt="error">
<div class="err err-pass">Password cannot be empty</div>
<button class="claim-btn">CLAIM YOUR FREE TRIAL</button>
<p class="agree">By clicking the button, you are agreeing to our <span class="terms">Terms and
Services</span></p>
</form>
</section>
</body>
<script src="script.js"></script>
</html>
CSS:
#import url('css-reset.css');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap');
:root {
--color-red: hsl(0, 100%, 74%);
--color-green: hsl(154, 59%, 51%);
--color-blue: hsl(248, 32%, 49%);
--color-dark-blue: hsl(249, 10%, 26%);
--color-grayish-blue: hsl(246, 25%, 77%);
--color-white: hsl(0, 0%, 100%);
--font-weight-four: 400;
--font-weight-five: 500;
--font-weight-six: 600;
--font-weight-seven: 700;
}
body {
font-family: 'Poppins',
sans-serif;
background: url('/images/bg-intro-mobile.png') var(--color-red);
}
.container {
max-width: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 70px;
}
header h1 {
color: var(--color-white);
font-weight: var(--font-weight-six);
font-size: 1.7em;
padding: 50px 50px 20px 50px;
margin-left: 50px;
line-height: 1.2;
}
.first-para {
max-width: 17rem;
}
.main-paragraph {
color: var(--color-white);
font-weight: var(--font-weight-four);
font-size: 0.85em;
margin-bottom: 50px;
line-height: 2;
}
.second-line {
margin-left: 13px;
}
.third-line {
margin-left: 20px;
}
.invaluable {
margin-left: 92px;
}
.try-box {
width: 270px;
height: 65px;
background-color: var(--color-blue);
border-radius: 10px;
color: var(--color-white);
text-align: center;
padding: 15px;
font-size: 0.8em;
margin-bottom: 20px;
box-shadow: 0px 4px 5px 1px rgba(0, 0, 0, 0.29);
}
.try-box p:not(.try) {
font-weight: var(--font-weight-four);
}
.try {
font-weight: var(--font-weight-six);
}
.claim-form {
width: 270px;
background-color: var(--color-white);
height: 450px;
border-radius: 10px;
box-shadow: 0px 4px 5px 1px rgba(0, 0, 0, 0.29);
margin-bottom: 30px;
}
#first-name,
#last-name,
#email,
#password {
width: 240px;
padding: 7px;
margin: 13px 0 0px 15px;
}
.error-img {
/* display: none; */
position: relative;
left: 220px;
bottom: 24px;
height: 16px;
width: 16px;
}
.err {
/* display: none; */
color: var(--color-red);
font-style: italic;
font-size: 0.7em;
margin-left: 90px;
margin-top: -10px;
}
.err::placeholder {
color: var(--color-dark-blue);
/* opacity for firefox */
opacity: 70%;
font-size: 0.8em;
font-weight: var(--font-weight-seven);
}
.claim-btn {
width: 240px;
margin: 13px 0 13px 15px;
padding: 12px;
color: var(--color-white);
border-radius: 5px;
border: 1px;
background-color: var(--color-green);
font-size: 0.8em;
font-weight: var(--font-weight-four);
box-shadow: 0px 4px 5px 1px rgba(0, 0, 0, 0.29);
cursor: pointer;
}
.claim-btn:active {
opacity: 50%;
}
.agree {
font-size: 0.6em;
color: var(--color-grayish-blue);
margin-left: 35px;
}
.terms {
color: var(--color-red);
font-weight: var(--font-weight-six);
margin-left: 65px;
cursor: pointer;
}
Thank you.
Instead of display: none;, which removes elements from the document, you can use visibility: hidden. Setting the visibility hides the element without changing the layout of a document. Another option that would work similarly, would be opacity: 0.
Both of these options are fine for sighted users, but you should also set aria-hidden to true when they are not visible to avoid the errors being read by screen readers.
I just started learning HTML and CSS none of the fixes google has suggested have managed to align my contact box to the center of the page. I have tried justify-content, align-items, align-content, and display flex in combination with the stuff above. My page either stays the same or the box aligns itself to the upper left.
I have had a lot of trouble with the things I have built in html so far never aligning center. I would just like to understand why this is happening.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us</title>
<link rel="stylesheet" href="./CSS/Style.CSS" />
</head>
<body>
<div class="contact-box">
<form>
<!--unsure what HTML validations means but I added required to the name and email fields-->
<input
type="text"
class="input-field"
placeholder="Full Name"
required
/>
<input
type="text"
class="input-field"
placeholder="Your Email"
required
/>
<!--puts drop down in form-->
<select id="Priority">
<option value="Priority">Message Priority</option>
<option value="High">High Priority</option>
<option value="Medium">Medium Priority</option>
<option value="Low">Low Priority/ non-urgent</option>
</select>
<!--I don't understand why the placeholder isn't showing-->
<textarea
type="text"
class="input-field textarea-field"
placeholder="Your Message"
>
</textarea>
<!--Makes button-->
<button type="button" class="btn">Send Message</button>
</form>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
background-color: lightpink;
font-family: sans-serif;
}
/*styles contact box*/
.contact-box{
width: 500px;
background-color: antiquewhite;
box-shadow: 0 0 20px 0 #999;
/*below here I comment everything out within contact box styling and tried all the center alignment things I could find*/
top: 50%;
left: 50%;
transform: translate(-50%.-50%);
position: absolute;
}
form{
margin: 35px;
}
/*styles inputs name, email,etc*/
.input-field{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
/*Makes message box bigger*/
.textarea-field{
height: 150px;
padding-top: 10px;
}
/*styles send message button*/
.btn{
border-radius: 20px;
color: #fff;
margin-top: 18px;
padding: 10px;
background-color: #47c35a;
font-size: 12px;
border: none;
cursor: pointer;
}
/*styles dropdown menu*/
input [type=text], select{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
I guess you just have a typo here:
transform: translate(-50%.-50%);
It should look like this:
transform: translate(-50%,-50%);
please replace "margin : 35px" with "padding : 35px" in form class and use below 4 lines in contact-box class to center your form:
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
attaching the corrected code for your reference, hope it helps!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: lightpink;
font-family: sans-serif;
}
/*styles contact box*/
.contact-box{
width: 500px;
background-color: antiquewhite;
box-shadow: 0 0 20px 0 #999;
/*below here I comment everything out within contact box styling and tried all the center alignment things I could find*/
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
}
form{
padding: 35px;
}
/*styles inputs name, email,etc*/
.input-field{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
/*Makes message box bigger*/
.textarea-field{
height: 150px;
padding-top: 10px;
}
/*styles send message button*/
.btn{
border-radius: 20px;
color: #fff;
margin-top: 18px;
padding: 10px;
background-color: #47c35a;
font-size: 12px;
border: none;
cursor: pointer;
}
/*styles dropdown menu*/
input [type=text], select{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
</style>
</head>
<body>
<div class="contact-box">
<form>
<!--unsure what HTML validations means but I added required to the name and email fields-->
<input
type="text"
class="input-field"
placeholder="Full Name"
required
/>
<input
type="text"
class="input-field"
placeholder="Your Email"
required
/>
<!--puts drop down in form-->
<select id="Priority">
<option value="Priority">Message Priority</option>
<option value="High">High Priority</option>
<option value="Medium">Medium Priority</option>
<option value="Low">Low Priority/ non-urgent</option>
</select>
<!--I don't understand why the placeholder isn't showing-->
<textarea
type="text"
class="input-field textarea-field"
placeholder="Your Message"
>
</textarea>
<!--Makes button-->
<button type="button" class="btn">Send Message</button>
</form>
</div>
</body>
</html>
You should try to put the code below in your CSS file. When you start writing, upper left is the starting point, that's where your content is going.
html {
text-align: center;
}
I'm currently cloning a site and in the "enter email" input, the text wont align and sticks to the bottom of the input, and i'd prefer it to be in the middle on the left. How can i fix this? any help appreciated <3
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#400;500;700&display=swap");
:root {
--primary-text: #111111;
--secondary-text: #91908f;
--background: #fffefc;
--btn-primary: #e16259;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--b);
font-family: "Inter", sans-serif;
}
/* NAV */
header img {
float: left;
max-width: 100%;
height: 50px;
margin: 15px 60px;
}
header nav {
float: right;
margin-top: 30px;
padding-right: 20px;
}
header nav a,
header nav .vertical-line {
padding-right: 15px;
text-decoration: none;
color: #111111;
font-weight: 500;
}
header nav a:hover {
text-decoration: underline;
}
/* Hero Section */
.hero {
padding-top: 120px;
}
.hero-img {
display: flex;
justify-content: center;
max-width: 100%;
height: 200px;
}
h1 {
font-size: 70px;
text-align: center;
padding-top: 15px;
}
h4 {
text-align: center;
font-weight: 200;
font-size: 20px;
color: #91908f;
}
form {
display: flex;
justify-content: center;
}
input {
text-align: left;
width: 280px;
margin-top: 30px;
padding-top: 18px;
border: 1px solid #91908f;
border-radius: 4px;
margin-right: 10px;
}
input::placeholder {
margin-bottom: 20px;
}
form button {
width: 80px;
padding: 0px;
text-align: center;
margin-top: 30px;
color: #fffefc;
}
form label {
margin-top: 5px;
padding-left: 20px;
}
form .btn-primary {
display: inline-block;
background-color: #e16259;
border: 1px solid #af4d46;
text-align: center;
border-radius: 6px;
font-weight: 400;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notion</title>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
</head>
<body>
<header>
<img src="img/logo.png" alt="Notion Logo">
<nav>
Product
Download
Resources
Pricing
Careers
<span class="vertical-line">|</span>
Sign Up
Log In
</nav>
</header>
<div class="hero">
<div class="hero-img">
<img src="img/hero.webp" alt="Illustration of 3 people using laptop computers on seperate desks with different expressions">
</div>
<h1>All-in-one workspace</h1>
<h4>One tool for your whole team. Write, plan, and get organized.</h4>
<form action="">
<input type="text" placeholder="Email">
<button class='btn-primary' type="submit">Sign Up</button>
</form>
<p>For teams & individuals - web, mobile, Mac, Windows</p>
</div>
</body>
</html>
In input selector you can change the padding-top: 18px to padding: 10px, as below. Then remove that input::placeholder.
input {
width: 280px;
margin-top: 30px;
padding: 10px;
border: 1px solid #91908f;
border-radius: 4px;
margin-right: 10px;
}
<form action="">
<input type="text" placeholder="Email">
</form>
You can remove padding of input and adjust by using height and line height
.ip {
height: 30px;
line-height: 30px;
padding: 2px 8px;
}
<input type="text" class="ip" />
Define height for the input class and for input::placeholder remove margin-bottom: 20px; and set margin to auto and also add some left-padding.
input {
text-align: left;
width: 280px;
height: 40px;/*add height for your input*/
margin-top: 30px;
border: 1px solid #91908f;
border-radius: 4px;
margin-right: 10px;
}
input::placeholder {
margin: auto;/*set margin to auto*/
padding-left: 10px;/*add some left-padding*/
}
<form action="">
<input type="text" placeholder="Email">
<button class='btn-primary' type="submit">Sign Up</button>
</form>
Instead of scratching your head around custom CSS, you can use third party CSS libraries like Bootstrap or Semantic-UI which provide a variety of feature rich CSS components and will eventually reduce your work.
I am trying to create a login page based on this one in HTML and CSS. Of course, my logo will be different, and I am trying to add some transparency to the background image.
I'm new to web dev, but I don't think this is too complicated. It's just one background pic, with a single div spreading across the screen to hold the username and password bars.
I have put what I've got so far into this JSFiddle: https://jsfiddle.net/6eLuw2th/
Here's the code:
body {
opacity: 0.2;
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-size:cover;
z-index: -1;
}
form {
border: 3px solid #f1f1f1;
z-index: 0;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
z-index: 0;
}
button {
background-color: #8C1515;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
font-size: 15px;
width: 100%;
z-index: 0;
}
button:hover {
opacity: 0.8;
z-index: 0;
}
.container {
padding: 16px;
z-index: 0;
}
span.psw {
float: right;
padding-top: 16px;
z-index: 0;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: left;
width: 100%;
z-index: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css" />
</head>
<body>
<form action="/action_page.php" method="post">
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</body>
</html>
As you can see, the username/password content appears to be behind the image (even though the z-index is -1 for the background?). I do want to make the background appear slightly transparent, but have been having a bit of trouble that as well. Furthermore, my username and password bars stretch across the entire screen; I would prefer for them to be more like the example page I'm trying to recreate, with the login info bars restricted to the middle of the screen.
Any help or suggestions would be greatly appreciated!
Actually the issue you are facing is not about z-index. the issue is that you have opacity:0.2 set on the body, that's why it looks weird:
body {
opacity: 0.2; /* just remove this line */
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-size:cover;
z-index: -1;
}
also I amended the form to have less width and centered:
form {
border: 3px solid #f1f1f1;
z-index: 0;
width: 60%;
margin: 0 auto;
}
label {
color: #FFF;
}
Here is a working snippet:
body {
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-size:cover;
z-index: -1;
}
form {
border: 3px solid #f1f1f1;
z-index: 0;
width: 60%;
margin: 0 auto;
}
label {
color: #FFF;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
z-index: 0;
}
button {
background-color: #8C1515;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
font-size: 15px;
width: 100%;
z-index: 0;
}
button:hover {
opacity: 0.8;
z-index: 0;
}
.container {
padding: 16px;
z-index: 0;
}
span.psw {
float: right;
padding-top: 16px;
z-index: 0;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: left;
width: 100%;
z-index: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css" />
</head>
<body>
<form action="/action_page.php" method="post">
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</body>
</html>
1) You are not loading a faded background. You're loading a solid background and trying to fade the body, which faded EVERYTHING within the body, including your form.
2) Remove "width=100%" from your INPUT parts in the CSS and it will not stretch across the screen.
Body opacity affects everything in the body, so don't do it there.
Instead put the background image in a div
<div id="background"></div>
Then the css for it
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
opacity: 0.8;
filter:alpha(opacity=80);
}
For the input fields make sure not to have the width as 100%
If you want to have columns then check out:
https://www.w3schools.com/howto/howto_css_three_columns.asp
/*
Make the background in a div
*/
.bg {
width: 100%;
height: 100%;
position: fixed;
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-position: center;
background-repeat: no-repeat;
opacity: 0.2;
z-index: -1;
}
form {
border: 3px solid #f1f1f1;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #8C1515;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
font-size: 15px;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: left;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css" />
</head>
<body>
<!-- the div that contains the background -->
<div class="bg"></div>
<form action="/action_page.php" method="post">
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</body>
</html>
Please see the code snippets for the effect you want to achieve.
body {
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-size: cover;
}
form {
border: 3px solid #f1f1f1;
}
input[type=text],
input[type=password] {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #8C1515;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
font-size: 15px;
width: 50%;
}
button:hover {
opacity: 0.8;
}
.container {
padding: 16px 16px 16px 180px;
background-color: rgba(238, 238, 238, 0.3);
;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: left;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css" />
</head>
<body>
<form action="/action_page.php" method="post">
<div class="container">
<label for="uname"><b>Username</b></label><br>
<input type="text" placeholder="Enter Username" name="uname" required><br>
<label for="psw"><b>Password</b></label><br>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button><br>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</body>
</html>
I am used to working on codepen.io and forgot the basics of formatting properly.I am now working on Visual studio code.
Right now I am trying to just move everything over to the center and change my color. I noticed when I ran the code in here everything came out good. So, I am not sure what I am missing when I preview it in visual studio code.
Whenever I preview the code the visual studio code I get my image like this: HERE but whenever I look at my code though StackOverflow I see this: HERE
Inspecting the page i received these errors:
Failed to load resource: the server responded with a status of 404 (Not Found) styles.css
Failed to load resource: the server responded with a status of 404 (Not Found) favicon.ico
Failed to load resource: the server responded with a status of 404 (Not Found) styles.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
justify-content: space-between;
font-family: cursive;
text-align: center;
min-height: 100vh;
min-width: 370px;
background-image: linear-gradient(135deg,#00ccff,#9933ff 31%,#e646b6 52%,#fff9aa 77%,#00ff99,#00ccff);
background-size: 200%;
}
header h1 {
padding: 20px 10px;
letter-spacing: 0.2em;
color: white;
}
form * {
background: rgba(256, 256, 256, 0.3);
color: white;
}
form.search form .btn {
padding: 10px;
border-radius: 2px;
font-size: 16px;
border: 1px solid white;
}
::placeholder {
color: white;
}
form.search {
width: 40%;
min-width: 200px;
max-width: 600px;
}
form.search:focus {
outline: 0;
color: #333;
background: white;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3),
}
form.btn {
cursor: pointer;
width: 60px;
}
form.clear:hover {
background: ;
}
.giphy {
padding: 20px 0px 15px 0;
}
.giphy img {
width: 200px;
max-width: 800px;
margin: auto;
display: block;
}
giphy img.gif {
width: 50%;
max-width: 600px;
box-shadow: 0 0 1px 1px rgba(256,256,256,0.3);
}
footer {
padding: 5px;
font-size: 14px;
color: white;
}
footer a {
color: #333;
text-decoration: none;
}
footer a:hover {
color: white;
text-decoration: underline;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
<title>Giphy</title>
</head>
<header>
<body>
<h1>Giphy Hooligan</h1>
<form method="post">
<label style="display: none;">Search</label>
<input class="search" type="text" name="search" placeholder="Search" required>
<input class="btn" type="submit" value="OK">
<input class="btn" type="button" value="Favorites">
</form>
</header>
<section>
<div class="giphy">
<a href="https://giphy.com/" target="blank">
<img src="https://res.cloudinary.com/beumsk/image/upload/v1520544016/giphy-logo-6611-s-_vme7aa.png" alt="giphy">
</a>
</div>
</section>
<footer>
<p>Dakota Coleman</p>
</footer>
</body>
</html>
If it's just a matter of aligning the items in the body to the center then you need
align-items:center;
...on the body
You will probably need to add additional centering methods for children (like the form) and flexbox is not inherited by flex-children.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
/* add this */
font-family: cursive;
text-align: center;
min-height: 100vh;
min-width: 370px;
background-image: linear-gradient(135deg, #00ccff, #9933ff 31%, #e646b6 52%, #fff9aa 77%, #00ff99, #00ccff);
background-size: 200%;
}
header h1 {
padding: 20px 10px;
letter-spacing: 0.2em;
color: white;
}
form * {
background: rgba(256, 256, 256, 0.3);
color: white;
}
form.search form .btn {
padding: 10px;
border-radius: 2px;
font-size: 16px;
border: 1px solid white;
}
::placeholder {
color: white;
}
form.search {
width: 40%;
min-width: 200px;
max-width: 600px;
}
form.search:focus {
outline: 0;
color: #333;
background: white;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3),
}
form.btn {
cursor: pointer;
width: 60px;
}
form.clear:hover {
background: ;
}
.giphy {
padding: 20px 0px 15px 0;
}
.giphy img {
width: 200px;
max-width: 800px;
margin: auto;
display: block;
}
giphy img.gif {
width: 50%;
max-width: 600px;
box-shadow: 0 0 1px 1px rgba(256, 256, 256, 0.3);
}
footer {
padding: 5px;
font-size: 14px;
color: white;
}
footer a {
color: #333;
text-decoration: none;
}
footer a:hover {
color: white;
text-decoration: underline;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
<title>Giphy</title>
</head>
<header>
<body>
<h1>Giphy Hooligan</h1>
<form method="post">
<label style="display: none;">Search</label>
<input class="search" type="text" name="search" placeholder="Search" required>
<input class="btn" type="submit" value="OK">
<input class="btn" type="button" value="Favorites">
</form>
</header>
<section>
<div class="giphy">
<a href="https://giphy.com/" target="blank">
<img src="https://res.cloudinary.com/beumsk/image/upload/v1520544016/giphy-logo-6611-s-_vme7aa.png" alt="giphy">
</a>
</div>
</section>
<footer>
<p>Dakota Coleman</p>
</footer>
</body>
</html>