Trying to figure out why my input fields for my username & password are dramatically different, when they are paired together on my CSS file. Im fairly new and just thinking around, but not sure why there is a size difference.
Wonky sizing from password/ username fields. Disregard the horrible image as the logo, just playing around with it all.
*{
font-family: "lato", sans-serif;
}
body{
background-color: #59c9fc;
}
.login-div{
margin: 100px auto;
width: 350px;
background-color: #fff
padding: 60px;
}
.logo{
background-color:#59c9fc;
width: 150px;
height: 150px;
border-radius: 50%;
margin: 0 auto;
margin-bottom: 10px;
}
.logo img{
width: 100%;
}
.title, .sub-title{
text-align: center;
color: #505050;
font-size: 35px;
}
.sub-title{
font-size: 18px;
}
.form{
width: 100%;
margin-top: 30px;
}
.form input{
font-size: 18px;
padding: 10px 20px 10px 5px;
border: none;
outline: none;
background: none;
}
.username, .password {
display: block;
border-radius: 500px;
border: 1px solid rgba(0, 0, 0,0.2);
padding: 10px;
margin: 10px 0;
background-color: #fff;
}
.form svg{
height: 20px;
margin-bottom: -5px;
margin-left: 10px;
margin-right: 5px;
}
.options{
display: flex;
flex-direction: row;
justify-content:space-between;
padding: 5px 0px;
margin-bottom: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css" class="css">
<title>Document</title>
</head>
<body>
<div class="login-div">
<div class="logo">
<img src="finger.png" alt="">
</div>
<div class="title">Education Community</div>
<div class="sub-title">K-12 Education Consultants</div>
<div class="form">
<div class="username">
<svg class="svg-icon" viewBox="0 0 20 20">
<path
d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z">
</path>
</svg>
<input type="text" class="text" placeholder="username or email">
</div>
<div class="password">
<svg class="svg-icon" viewBox="0 0 20 20">
<path
d="M17.308,7.564h-1.993c0-2.929-2.385-5.314-5.314-5.314S4.686,4.635,4.686,7.564H2.693c-0.244,0-0.443,0.2-0.443,0.443v9.3c0,0.243,0.199,0.442,0.443,0.442h14.615c0.243,0,0.442-0.199,0.442-0.442v-9.3C17.75,7.764,17.551,7.564,17.308,7.564 M10,3.136c2.442,0,4.43,1.986,4.43,4.428H5.571C5.571,5.122,7.558,3.136,10,3.136 M16.865,16.864H3.136V8.45h13.729V16.864z M10,10.664c-0.854,0-1.55,0.696-1.55,1.551c0,0.699,0.467,1.292,1.107,1.485v0.95c0,0.243,0.2,0.442,0.443,0.442s0.443-0.199,0.443-0.442V13.7c0.64-0.193,1.106-0.786,1.106-1.485C11.55,11.36,10.854,10.664,10,10.664 M10,12.878c-0.366,0-0.664-0.298-0.664-0.663c0-0.366,0.298-0.665,0.664-0.665c0.365,0,0.664,0.299,0.664,0.665C10.664,12.58,10.365,12.878,10,12.878">
</path>
</svg>
<input type="text" class="password" placeholder="password">
</div>
<div class="options">
<div class="remember-me">
<input id="remember-me" type="checkbox">
<label for="remember-me">Remember me?</label>
</div>
<div class="forgot-password">
Forgot Password
</div>
</div>
<button class="signin-btn">LOGIN</button>
<div class="signup">
New client? Register here.
</div>
</div>
</div>
</body>
</html>
Remove the password class form the password input.
<input type="text" placeholder="password">
* {
font-family: "lato", sans-serif;
}
body {
background-color: #59c9fc;
}
.login-div {
margin: 100px auto;
width: 350px;
background-color: #fff padding: 60px;
}
.logo {
background-color: #59c9fc;
width: 150px;
height: 150px;
border-radius: 50%;
margin: 0 auto;
margin-bottom: 10px;
}
.logo img {
width: 100%;
}
.title,
.sub-title {
text-align: center;
color: #505050;
font-size: 35px;
}
.sub-title {
font-size: 18px;
}
.form {
width: 100%;
margin-top: 30px;
}
.form input {
font-size: 18px;
padding: 10px 20px 10px 5px;
border: none;
outline: none;
background: none;
}
.username,
.password {
display: block;
border-radius: 500px;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 10px;
margin: 10px 0;
background-color: #fff;
}
.form svg {
height: 20px;
margin-bottom: -5px;
margin-left: 10px;
margin-right: 5px;
}
.options {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 5px 0px;
margin-bottom: 30px;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;400&display=swap" rel="stylesheet">
<div class="login-div">
<div class="logo">
<img src="finger.png" alt="">
</div>
<div class="title">Education Community</div>
<div class="sub-title">K-12 Education Consultants</div>
<div class="form">
<div class="username">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z">
</path>
</svg>
<input type="text" class="text" placeholder="username or email">
</div>
<div class="password">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M17.308,7.564h-1.993c0-2.929-2.385-5.314-5.314-5.314S4.686,4.635,4.686,7.564H2.693c-0.244,0-0.443,0.2-0.443,0.443v9.3c0,0.243,0.199,0.442,0.443,0.442h14.615c0.243,0,0.442-0.199,0.442-0.442v-9.3C17.75,7.764,17.551,7.564,17.308,7.564 M10,3.136c2.442,0,4.43,1.986,4.43,4.428H5.571C5.571,5.122,7.558,3.136,10,3.136 M16.865,16.864H3.136V8.45h13.729V16.864z M10,10.664c-0.854,0-1.55,0.696-1.55,1.551c0,0.699,0.467,1.292,1.107,1.485v0.95c0,0.243,0.2,0.442,0.443,0.442s0.443-0.199,0.443-0.442V13.7c0.64-0.193,1.106-0.786,1.106-1.485C11.55,11.36,10.854,10.664,10,10.664 M10,12.878c-0.366,0-0.664-0.298-0.664-0.663c0-0.366,0.298-0.665,0.664-0.665c0.365,0,0.664,0.299,0.664,0.665C10.664,12.58,10.365,12.878,10,12.878">
</path>
</svg>
<input type="text" placeholder="password">
</div>
<div class="options">
<div class="remember-me">
<input id="remember-me" type="checkbox">
<label for="remember-me">Remember me?</label>
</div>
<div class="forgot-password">
Forgot Password
</div>
</div>
<button class="signin-btn">LOGIN</button>
<div class="signup">
New client? Register here.
</div>
</div>
</div>
Codepen: https://codepen.io/manaskhandelwal1/pen/OJRKZEy?editors=1100
Related
since i am learning CSS i am playing around a little, and i ran into this weird issue where the footer is not the end of the page.
Currently my Footer is like this:
If i move the whole div into the footer div, it doesn't show the full content since the footer sticks to the page, so i moved it above to be able to scroll the content, which works fine so far, however, as soon as i zoom out it creates more background below the footer.
html, body {
max-width: 100%;
max-height: 100%;
height: 100%;
overflow-x: visible;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
background-color: #666666;
}
/* Style for the navigation */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the navigation links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 1.3rem 1.3rem;
text-decoration: none;
font-weight: bold;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a:not(.active){
padding-bottom: (1.3rem + 6px);
}
.topnav .active:after{
border: 10px solid transparent;
border-bottom-color: #cd650b;
border-top-width: 0;
content: "";
display: block;
z-index: 101;
margin: 0 auto;
width: 0px;
margin-top: 11px;
margin-bottom: -21px;
}
.TopnavSecondBar {
height: 40px;
background-color: #cd650b;
min-width: 100%;
max-width: 100%;
margin: auto;
z-index: 10;
}
/* Triangle Shapes Start*/
.shapes {
position: 50px 50px 50px 50px;
background-color: #cd650b;
}
.boxesFooterBoxesBefore .st0, .boxesFooterBoxesAfter .st0 {
fill: #cd650b;
bottom: 0;
right: 0;
}
*, ::before, ::after {
box-sizing: inherit;
min-width: 0;
}
.boxesFooterBoxes {
color: #eee;
}
/* Content style */
.content {
/* background-color: #d9d9d9; */
padding: 10px;
height: 200px;
}
.button1 {
background-color: #333;
color: white;
padding: 0.5rem;
font-family: Arial, Helvetica, sans-serif;
border-style: hidden;
cursor: pointer;
margin-top: 1rem;
}
.button2 {
text-decoration: none;
background-color: #333;
color: white;
padding: 0.5rem;
font-family: Arial, Helvetica, sans-serif;
border-style: hidden;
cursor: pointer;
margin-top: 1rem;
}
.button2:disabled{
background-color: grey;
color: white;
padding: 0.5rem;
font-family: Arial, Helvetica, sans-serif;
border-style: hidden;
cursor: pointer;
margin-top: 1rem;
}
/* Center Buttons */
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/* Footer */
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: transparent;
color: white;
text-align: center;
}
.footerLinks:link, .footerLinks:visited {
background-color: #333;
color: white;
padding: 0.2rem;
text-align: center;
text-decoration: none;
display: inline-block;
margin-top: 0.452125rem;
margin-bottom: 0.1rem;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.footerLinks:hover, .footerLinks:active {
background-color: #d9d9d9;
color: black;
}
.copyright {
margin-top: 1px;
font-size: .9525rem
}
/* Javascript message style */
.js{
white-space: nowrap;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.converter {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.boxesFooterBoxesAfter {
width: 101%;
z-index: 1;
height: 60px;
position: relative;
margin-top: 0px;
margin-bottom: 2rem;
}
.BottomNavSecondBar {
height: 40px;
background-color: #cd650b;
min-width: 100%;
max-width: 100%;
margin: 0px auto auto auto;
z-index: 10;
}
.BottomNavThirdBar {
height: 65.2125px;
background-color: #333;
min-width: 100%;
max-width: 100%;
margin: 0px auto auto auto;
z-index: 10;
text-align: center;
}
.AdditionalPartnerBefore, .st2 {
width: 100%;
height: -50px;
position: relative;
margin-bottom: -4px;
}
.codebox {
resize: none;
border-style: solid;
}
/* Display button above text */
/*.btn i {
display: block;
} */
.btn {
width: 8.4rem;
display: inline-block;
background-color: #333;
border: none;
color: white;
padding: 1.7rem;
margin: 0.3rem;
font-size: 17px;
cursor: pointer;
border: solid;
border-color: #cd650b;
border-width: 1px;
}
/* Darker background on mouse-over */
.btn:hover {
background-color: #ddd;
color: black;
border-color: #cd650b;
border-width: 1px;
}
.flex-container {
display: flex;
background-color: transparent;
flex-direction: row;
flex: auto;
}
.flex-container > div {
background-color: transparent;
margin: 20rem;
padding: 20px;
font-size: 30px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: center;
}
.btn {
max-width: 30%;
margin: 5px;
}
.schmutz {
.footer {
display: flex;
background-color: #000;
color: #fff;
height: 170px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/jpg" href="./images/favicon.jpg"> <!--favicon-->
<link rel="stylesheet" href="./styles.css" type="text/css">
<link rel="stylesheet" href="./button.css" type="text/css">
<link rel="stylesheet" href="./math.css" type="text/css">
<script src="https://kit.fontawesome.com/763deb09da.js" crossorigin="anonymous"></script>
<meta charset="UTF-8"> <!--UTF8 charset-->
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <!--responsive-->
<title>Schmutz</title> <!--page title-->
</head>
<body>
<noscript id="noscript" class="noscript"> <!-- if Javascript is disabled -->
<meta HTTP-EQUIV="refresh" content=0;url="nojs.php">
</noscript> <!-- redirect to nojs site -->
<div class="topnav">
<b>Home</b>
<a class="active" href="./configurator.php"><b>Configurator</b></a>
<b>Trader</b>
<a target="_blank" rel="noopener noreferrer" href="https://scum-forum.com/"><b>Forum</b></a>
</div>
<div class="TopnavSecondBar"></div>
<div class="pageNavigationAfter">
<svg version="1.1" preserveAspectRatio="none" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 80" style="enable-background:new 0 0 1920 80;" xml:space="preserve">
<g transform="translate(0.000000,80.000000) scale(0.100000,-0.100000)">
<path fill="#333" class="st1" d="M0 400 l0 -400 88 1 c48 0 4369 179 9602 398 l9515 399 -9602 1 -9603 1 0 -400z"></path>
</g>
</svg>
</div>
<div class="flex-container">
<button class="btn"><i class="fa fa-wrench"></i> Basics</button>
<button class="btn"><i class="fa fa-car"></i> Vehicle</button>
<button class="btn"><i class="fa fa-dolly"></i> Items</button>
<button class="btn"><i class="fa fa-download"></i> Config</button>
</div>
<hr>
<div class="wrapper">
<div class="a">
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label> testtesttesttest
<div class="b">
<label class="test" for="quantity">economy-reset-time-hours</label>
<input class="number" type="number" id="quantity" name="quantity" min="-1" max="100">
<label for="quantity"></label>
</div>
<div class="b">
<label class="test" for="quantity">e</label>
<input class="number" type="number" id="quantity" name="quantity" min="-1" max="100">
<label for="quantity">testtesttesttesttesttest</label>
</div>
<div class="b">
<label class="test" for="quantity">e</label>
<input class="number" type="number" id="quantity" name="quantity" min="-1" max="100">
<label for="quantity">testtesttesttesttesttest</label>
</div>
<div class="b">
<label class="test" for="quantity">e</label>
<input class="number" type="number" id="quantity" name="quantity" min="-1" max="100">
<label for="quantity">testtesttesttesttesttest</label>
</div>
<div class="b">
<label class="test" for="quantity">e</label>
<input class="number" type="number" id="quantity" name="quantity" min="-1" max="100">
<label for="quantity">testtesttesttesttesttest</label>
</div>
<div class="b">
<label class="test" for="quantity">e</label>
<input class="number" type="number" id="quantity" name="quantity" min="-1" max="100">
<label for="quantity">testtesttesttesttesttest</label>
</div>
<div class="b">
<label class="test" for="quantity">e</label>
<input class="number" type="number" id="quantity" name="quantity" min="-1" max="100">
<label for="quantity">testtesttesttesttesttest</label>
</div>
<div class="b">
<label class="test" for="quantity">e</label>
<input class="number" type="number" id="quantity" name="quantity" min="-1" max="100">
<label for="quantity">testtesttesttesttesttest</label>
</div>
<div class="b">
<label class="test" for="quantity">e</label>
<input class="number" type="number" id="quantity" name="quantity" min="-1" max="100">
<label for="quantity">testtesttesttesttesttest</label>
</div>
</div>
</div>
<div class="schmutz">
<div class="AdditionalPartnerBefore">
<svg version="1.1" preserveAspectRatio="none" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 80" style="max-width:100%; enable-background:new 0 0 1920 80;" xml:space="preserve">
<!-- <svg version="1.1" preserveAspectRatio="none" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="5rem" style="max-width:100%; enable-background:new 0 0 1920 80;" xml:space="preserve"> -->
<g transform="translate(0.000000,80.000000) scale(0.100000,-0.100000)">
<path fill="#333" class="st2" d="M9480 400 l-9485 -398 9603 -1 9602 -1 0 400 0 400 -117 -1 c-65 -1 -4386 -180 -9603 -399z"></path>
</g>
</svg>
</div>
<div class="BottomNavSecondBar"></div>
<div class="BottomNavThirdBar">
<a class="footerLinks" href="https://scum-forum.com/core/legal-notice/">Legal Notice</a>
<a class="footerLinks" href="https://scum-forum.com/core/privacy-policy/">Privacy Policy</a>
<p class="copyright">© test-test.com<p>
</div>
<div class="footer"></div>
</body>
</html>
You can use flex-box to achieve a footer that stays at the bottom of the browser window when there isn't sufficient content to push it down. When there is sufficient content, the footer will be in a natural flow with the other elements and the page (including footer) will scroll as expected.
You can see how this works in this CodePen. (In the future, creating a minimal reproducible example in something like CodePen can help people debug your issue faster. You'll need to strip away as much as possible from your code so that only the essential parts that cause the issue remain.) I've marked the parts relevant to you, but, in summary:
Set the CSS properties of display: flex; flex-direction: column; min-height: 100vh; on your body (or another element that wraps around your nav, main content, and footer)
Wrap your main content in a wrapping container, like main and apply flex-grow: 1
I'm creating a homepage for my website and want a logo (avatar) to appear on the left hand side of the page and a login form to appear on the right hand side. My current code displays a centered login box and avatar. The avatar is directly above the login box (and slightly offscreen).
Ideally I'm looking to replicate facebooks homepage theme (facebook.com)
Any ideas?
html
{% load static %}
{#<link rel="stylesheet" type="text/css" href="{% static 'homepage/style.css' %}">#}
<html lang="">
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="{% static "homepage/style.css" %}">
<body>
<div class="rows">
<div class="logo">
<img src="{% static "homepage/images/my_logo.png" %}"
class="avatar"
alt=""
width=""
height="">
</div>
<div class="login-box">
<h1>Login</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
Forgot password?<br>
Sign-up<br>
</form>
</div>
</div>
</body>
</html>
css
body {
margin: 0;
padding: 0;
background-size: cover;
background: black center;
font-family: sans-serif;
}
.avatar {
float: left;
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
top: -75px;
left: calc(50% - 100px);
}
.login-box{
float: right;
width: 320px;
height: 420px;
background: #000;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
h1 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.login-box p {
margin: 0;
padding: 0;
font-weight: bold;
}
.login-box input {
width: 100%;
margin-bottom: 20px;
}
.login-box input[type="text"], input[type="password"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: #ffc107;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
cursor: pointer;
background: lightgray;
color: #000;
}
.login-box a {
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
.login-box a:hover {
color: #ffc107;
}
Here is a basic example of placing two items side by side across the screen. The first uses display grid, and outlines 2 columns, the second is using flex.
img{
height: 50vh;
}
.grid-container{
display: grid;
height: 50vh;
grid-template-columns: auto 1fr;
}
.flex-container{
display: flex;
height: 50vh;
}
.login {
display: flex;
flex-direction: column;
}
<div class="grid-container">
<img src="https://picsum.photos/seed/picsum/200/200" alt="">
<div class="login">
<h1>Login</h1>
<form>
<div>
<label for="email">Email</label>
<input type="text" name="email">
</div>
<div>
<label for="paswd">Password</label>
<input type="password" name="passwd">
</div>
</form>
</div>
</div>
<div class="flex-container">
<img src="https://picsum.photos/seed/picsum/200/200" alt="">
<div class="login">
<h1>Login</h1>
<form>
<div>
<label for="email">Email</label>
<input type="text" name="email">
</div>
<div>
<label for="paswd">Password</label>
<input type="password" name="passwd">
</div>
</form>
</div>
</div>
Im trying to get the logo and search bar close together on the left side and extend the search bar to the right more. I dont know what else to do. Also I need to make a join and log in button to the right of everything. I also cant seem to get the submit button on the right side of the search field. Basically needs to look like this
#import url('https://fonts.googleapis.com/css?family=Poppins');
body {
font-family: 'Poppins';
}
header>div {
padding: 0 25px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid lightgray;
}
nav {
width: 600px;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
text-decoration: none;
color: black;
}
.blackHeart {
width: 20px;
margin-right: 1rem;
}
.searchmenu {
padding-top: 12.5px;
padding-bottom: 12.5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
width: 50px;
margin-left: .3rem;
display: right;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px;
background: red;
font-size: 17px;
border: none;
cursor: pointer;
color: white;
}
.topnav .search-container button:hover {
background: black;
}
.search {
background-color: rgba(211, 211, 211, 0.463);
float: right;
}
<!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">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<header>
<div>
<div>
<img class="blackHeart" src="images/black-heart.png" alt="black heart" />
<span> Nifty Penguin Magic </span>
</div>
<nav>
<ul>
<li> npm Enterprise </li>
<li> Products </li>
<li> Solutions </li>
<li> Resources </li>
<li> Docs </li>
<li> Support </li>
</ul>
</nav>
</div>
<div class="searchmenu">
<ul>
<div>
<img class="logo" src="images/npm-logo.png" alt="npm logo">
</div>
<div class="topnav">
<div class="search-container">
<form>
<input type="text" placeholder="Search.." name="search" class="search">
<button type="submit">Submit</button>
</form>
</div>
</div>
<div>
Join Log In
</div>
</ul>
</div>
</header>
<body>
</body>
</html>
Is this work? I cancelled all float: right from your code and replaced with flexbox
#import url('https://fonts.googleapis.com/css?family=Poppins');
body {
font-family: 'Poppins';
}
header>div {
padding: 0 25px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid lightgray;
}
nav {
width: 600px;
}
form {
display: flex;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
text-decoration: none;
color: black;
}
.blackHeart {
width: 20px;
margin-right: 1rem;
}
.searchmenu {
padding-top: 12.5px;
padding-bottom: 12.5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
width: 50px;
margin-left: .3rem;
display: right;
}
.topnav, .searchContainer {
width: 100%;
}
.topnav input[type=text] {
padding: 6px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
width: 18%;
padding: 6px;
background: red;
font-size: 17px;
border: none;
cursor: pointer;
color: white;
}
.topnav .search-container button:hover {
background: black;
}
.search {
background-color: rgba(211, 211, 211, 0.463);
width: 100%;
border: none;
outline: none;
}
.searchmenu ul {
padding: 0;
width: 100%;
display: flex;
align-items: center;
}
.searchDiv {
width: 78%;
display: flex;
align-items: center;
border: 1px solid black;
background-color: rgba(211, 211, 211, 0.463);
}
.icon {
width: 20px;
height: 20px;
}
<!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">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<header>
<div>
<div>
<img class="blackHeart" src="images/black-heart.png" alt="black heart" />
<span> Nifty Penguin Magic </span>
</div>
<nav>
<ul>
<li> npm Enterprise </li>
<li> Products </li>
<li> Solutions </li>
<li> Resources </li>
<li> Docs </li>
<li> Support </li>
</ul>
</nav>
</div>
<div class="searchmenu">
<ul>
<div>
<img class="logo" src="images/npm-logo.png" alt="npm logo">
</div>
<div class="topnav">
<div class="search-container">
<form>
<div class="searchDiv">
<svg class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512">
<g>
<path d="m495,466.1l-119.2-119.2c29.1-35.5 46.5-80.8 46.5-130.3 0-113.5-92.1-205.6-205.6-205.6-113.6,0-205.7,92.1-205.7,205.7s92.1,205.7 205.7,205.7c49.4,0 94.8-17.4 130.3-46.5l119.1,119.1c8,8 20.9,8 28.9,0 8-8 8-20.9 0-28.9zm-443.2-249.4c-1.42109e-14-91 73.8-164.8 164.8-164.8 91,0 164.8,73.8 164.8,164.8s-73.8,164.8-164.8,164.8c-91,0-164.8-73.8-164.8-164.8z"/>
</g>
</svg>
<input type="text" placeholder="Search.." name="search" class="search">
</div>
<button type="submit">Submit</button>
</form>
</div>
</div>
<div>
Join Log In
</div>
</ul>
</div>
</header>
<body>
</body>
</html>
The problem is you are going with floats also i have made sime changes to your overall html and css you can compare with your code.
#import url("https://fonts.googleapis.com/css?family=Poppins");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins";
}
header > .firstnav {
padding: 12.5px 25px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid lightgray;
}
nav {
width: 600px;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
text-decoration: none;
color: black;
}
.blackHeart {
width: 20px;
margin-right: 1rem;
}
.searchmenu {
padding: 12.5px 25px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
width: 50px;
margin-left: 0.3rem;
}
.searchmenu form {
position: relative;
}
.searchmenu form svg {
width: 33px;
background: beige;
padding: 7px;
position: absolute;
color: black;
height: 34px;
top: -1px;
left: 29px;
}
.searchmenu input[type="text"] {
padding: 6px 35px;
font-size: 17px;
border: none;
background-color: rgba(211, 211, 211, 0.463);
margin-left: 30px;
width: 1050px;
}
.searchmenu button {
padding: 6px;
background: red;
font-size: 17px;
border: none;
cursor: pointer;
color: white;
}
.searchmenu ul li {
list-style: none;
padding: 5px 0;
}
.searchmenu ul li a {
text-decoration: none;
padding: 0 15px;
}
.searchmenu ul {
display: flex;
}
.join {
border: 1px solid grey;
}
and your HTML
<header>
<div class="firstnav">
<div>
<img
class="blackHeart"
src="images/black-heart.png"
alt="black heart"
/>
<span> Nifty Penguin Magic </span>
</div>
<nav>
<ul>
<li> npm Enterprise </li>
<li> Products </li>
<li> Solutions </li>
<li> Resources </li>
<li> Docs </li>
<li> Support </li>
</ul>
</nav>
</div>
<div class="searchmenu">
<div>
<img class="logo" src="images/npm-logo.png" alt="npm logo" />
</div>
<!-- <div class="topnav"> -->
<!-- <div class="search-container"> -->
<form>
<svg
class="icon"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
xmlns:xlink="http://www.w3.org/1999/xlink"
enable-background="new 0 0 512 512"
>
<g>
<path
d="m495,466.1l-119.2-119.2c29.1-35.5 46.5-80.8 46.5-130.3 0-113.5-92.1-205.6-205.6-205.6-113.6,0-205.7,92.1-205.7,205.7s92.1,205.7 205.7,205.7c49.4,0 94.8-17.4 130.3-46.5l119.1,119.1c8,8 20.9,8 28.9,0 8-8 8-20.9 0-28.9zm-443.2-249.4c-1.42109e-14-91 73.8-164.8 164.8-164.8 91,0 164.8,73.8 164.8,164.8s-73.8,164.8-164.8,164.8c-91,0-164.8-73.8-164.8-164.8z"
/>
</g>
</svg>
<input
type="text"
placeholder="Search.."
name="search"
class="search"
/>
<button type="submit">Submit</button>
</form>
<!-- </div> -->
<!-- </div> -->
<ul>
<li class="join">Join</li>
<li>Login</li>
</ul>
</div>
</header>
i am trying to have a dropdown box with a form so i can change any settings in case of a misspell and, after a few research i can't find the root of the problem. I need the icon to be on the navigation bar. I already tryed to change de z-index of the settings container with no success, change the display of the boxes, used flex containers and still with no results.
This is the HTML and CSS (scripts are running as intended)
.row::after{
content: "";
clear: both;
display: table;
}
#media screen and (max-width: 600px){
.navbar {position: relative;}
}
.navbar{
display: flex;
border-bottom: 1px solid black;
overflow: hidden;
}
.navbar a{
color: black;
text-align: left;
padding: 1.5% 4%;
text-decoration: none;
font-size: 18px;
border-right: 1px solid black;
cursor: pointer;
}
.buttonnav{
border: 1px solid black;
width: 10%;
background-color: lightgray;
text-align: center;
padding-top: 0.5%;
margin-left: 15%;
border-radius: 5px;
margin-top: 1%;
margin-bottom: 1%;
cursor: pointer;
}
.settingscontainer{
display: inline-block;
position: relative;
padding-left: 2.5%;
padding-top: 1%;
z-index: 99;
}
.settingscontainer-content{
display: none;
position: absolute;
width: 80%;
z-index: 99;
}
.settingscontainer:hover .settingscontainer-content{
display: block;
}
.settingscontainer-content input[type = "submit"]{
text-align: center;
border-radius: 5px;
background-color: lightgreen;
margin-top: 2.5%;
float: right;
margin-right: 15%;
}
.settingscontainer-content input[type = "text"]{
width: 80%;
}
.settingsicon{
width: 25px;
height: 25px;
cursor: pointer;
}
<!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">
<link rel="stylesheet" href="styletest.css" type="text/css">
<title>Document</title>
</head>
<body>
<div class="row">
<div class="navbar" id="navbar">
<a class="w3-hover-shadow" onclick="navHome()">Home</a>
<a class="w3-hover-shadow" onclick="navBoard()" style="background-color: lightgrey;">Board</a>
<a class="w3-hover.shadow" onclick="navConf()">Configure</a>
<a class="w3-hover-shadow" onclick="navGraph()">Graphs</a>
<a class="w3-hover-shadow" onclick="navHist()">History</a>
<div class="buttonnav" id="btncon" onclick="altername()">Connect</div>
<div class="settingscontainer">
<img src="node_modules/#tabler/icons/icons-png/settings.png" alt="settings" class="settingsicon">
<div class="settingscontainer-content">
<form action="">
<label for="nameboardset">Name of the board:</label><br>
<input type="text" name="nameboardset" id="nameboardset" placeholder="Board 1"><br>
<label for="">IP address:</label><br>
<input type="text" name="ipaddset" id="ipaddset" placeholder="192.168.1.1"><br>
<label for="portset">Port:</label><br>
<input type="text" name="portset" id="portset" placeholder="8080"><br>
<label for="fileset">Image:</label><br>
<input type="file" name="fileset" id="fileset">
<input type="submit" value="Save Changes">
</form>
</div>
</div>
</div>
</div>
<!--Body Content-->
</body>
</html>
Removing overflow: hidden from your navbar should fix the issue.
.row::after{
content: "";
clear: both;
display: table;
}
#media screen and (max-width: 600px){
.navbar {position: relative;}
}
.navbar{
display: flex;
border-bottom: 1px solid black;
}
.navbar a{
color: black;
text-align: left;
padding: 1.5% 4%;
text-decoration: none;
font-size: 18px;
border-right: 1px solid black;
cursor: pointer;
}
.buttonnav{
border: 1px solid black;
width: 10%;
background-color: lightgray;
text-align: center;
padding-top: 0.5%;
margin-left: 15%;
border-radius: 5px;
margin-top: 1%;
margin-bottom: 1%;
cursor: pointer;
}
.settingscontainer{
display: inline-block;
position: relative;
padding-left: 2.5%;
padding-top: 1%;
z-index: 99;
}
.settingscontainer-content{
display: none;
position: absolute;
width: 80%;
z-index: 99;
}
.settingscontainer:hover .settingscontainer-content{
display: block;
}
.settingscontainer-content input[type = "submit"]{
text-align: center;
border-radius: 5px;
background-color: lightgreen;
margin-top: 2.5%;
float: right;
margin-right: 15%;
}
.settingscontainer-content input[type = "text"]{
width: 80%;
}
.settingsicon{
width: 25px;
height: 25px;
cursor: pointer;
}
<!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">
<link rel="stylesheet" href="styletest.css" type="text/css">
<title>Document</title>
</head>
<body>
<div class="row">
<div class="navbar" id="navbar">
<a class="w3-hover-shadow" onclick="navHome()">Home</a>
<a class="w3-hover-shadow" onclick="navBoard()" style="background-color: lightgrey;">Board</a>
<a class="w3-hover.shadow" onclick="navConf()">Configure</a>
<a class="w3-hover-shadow" onclick="navGraph()">Graphs</a>
<a class="w3-hover-shadow" onclick="navHist()">History</a>
<div class="buttonnav" id="btncon" onclick="altername()">Connect</div>
<div class="settingscontainer">
<img src="node_modules/#tabler/icons/icons-png/settings.png" alt="settings" class="settingsicon">
<div class="settingscontainer-content">
<form action="">
<label for="nameboardset">Name of the board:</label><br>
<input type="text" name="nameboardset" id="nameboardset" placeholder="Board 1"><br>
<label for="">IP address:</label><br>
<input type="text" name="ipaddset" id="ipaddset" placeholder="192.168.1.1"><br>
<label for="portset">Port:</label><br>
<input type="text" name="portset" id="portset" placeholder="8080"><br>
<label for="fileset">Image:</label><br>
<input type="file" name="fileset" id="fileset">
<input type="submit" value="Save Changes">
</form>
</div>
</div>
</div>
</div>
<!--Body Content-->
</body>
</html>
CSS File:-
.row::after{
content: "";
clear: both;
display: table;
}
#media screen and (max-width: 600px){
.navbar {position: relative;}
}
.navbar{
display: flex;
border-bottom: 1px solid black;
}
.navbar a{
color: black;
text-align: left;
padding: 1.5% 4%;
text-decoration: none;
font-size: 18px;
border-right: 1px solid black;
cursor: pointer;
}
.buttonnav{
border: 1px solid black;
width: 10%;
background-color: lightgray;
text-align: center;
padding-top: 0.5%;
margin-left: 15%;
border-radius: 5px;
margin-top: 1%;
margin-bottom: 1%;
cursor: pointer;
}
.settingscontainer{
display: inline-block;
position: relative;
padding-left: 2.5%;
padding-top: 1%;
z-index: 99;
}
.settingscontainer-content{
display: none;
position: absolute;
width: 80%;
z-index: 99;
}
.settingscontainer:hover .settingscontainer-content{
display: block;
}
.settingscontainer-content input[type = "submit"]{
text-align: center;
border-radius: 5px;
background-color: lightgreen;
margin-top: 2.5%;
float: right;
margin-right: 15%;
}
.settingscontainer-content input[type = "text"]{
width: 80%;
}
.settingsicon{
width: 25px;
height: 25px;
cursor: pointer;
}
HTML File:-
<!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">
<link rel="stylesheet" href="styletest.css" type="text/css">
<title>Document</title>
</head>
<body>
<div class="row">
<div class="navbar" id="navbar">
<a class="w3-hover-shadow" onclick="navHome()">Home</a>
<a class="w3-hover-shadow" onclick="navBoard()" style="background-color: lightgrey;">Board</a>
<a class="w3-hover.shadow" onclick="navConf()">Configure</a>
<a class="w3-hover-shadow" onclick="navGraph()">Graphs</a>
<a class="w3-hover-shadow" onclick="navHist()">History</a>
<div class="buttonnav" id="btncon" onclick="altername()">Connect</div>
<div class="settingscontainer">
<img src="node_modules/#tabler/icons/icons-png/settings.png" alt="settings" class="settingsicon">
<div class="settingscontainer-content">
<form action="">
<label for="nameboardset">Name of the board:</label><br>
<input type="text" name="nameboardset" id="nameboardset" placeholder="Board 1"><br>
<label for="">IP address:</label><br>
<input type="text" name="ipaddset" id="ipaddset" placeholder="192.168.1.1"><br>
<label for="portset">Port:</label><br>
<input type="text" name="portset" id="portset" placeholder="8080"><br>
<label for="fileset">Image:</label><br>
<input type="file" name="fileset" id="fileset">
<input type="submit" value="Save Changes">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
When I use my web-site on mobile devices width of container doesn't cover 100% of body. I set width to 100%, I tried to put min-width on body, but I have white line on right side of the screen. I also tried to change viewport width, but that doesn't work.
*{
margin: 0;
padding: 0;
}
body{
font-family: 'Bai Jamjuree', sans-serif;
overflow-x: hidden;
min-width: 1050px;
}
h1{
color: #535a62;
}
p{
font-weight: 600;
color: #a6a7a9;
}
.header{
background: url("https://via.placeholder.com/1200");
background-size: cover;
height: 300px;
padding: 130px 0 0 0;
}
.logo{
margin: auto;
width: 125px;
height: 125px;
}
.title{
width: 690px;
height: 225px;
margin: auto;
margin-bottom: 100px;
}
.title-text h1{
text-align: center;
margin-bottom: 35px;
font-size: 2.75rem;
}
.title-text p{
text-align: center;
font-size: 1.25rem;
margin-bottom: 50px;
}
.title-buttons{
margin: auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 170px;
}
.download-ios button,
.download-mac button{
display: inline;
margin-right: 20px;
height: 50px;
width: 225px;
border-radius: 30px;
outline: none;
border: none;
font-size: 18px;
color: #fff;
padding: 10px 20px;
transition: 0.2s;
}
.download-ios button{
background-color: #26bba5;
border-bottom: 3px solid #18a08c;
}
.download-mac button{
background-color: #6174ff;
border-bottom: 3px solid #5362d7;
}
.computer-div{
margin-top: 500px;
position: relative;
}
.computer-image img{
display: inline;
margin-left: -30px;
width: 900px;
margin-bottom: 100px;
}
.all-searches-container{
position: absolute;
top: 50px;
right: 265px;
}
.search-div{
width: 350px;
}
.search-div h1{
margin-bottom: 15px;
}
.search-div p{
margin-bottom: 50px;
}
.title-img{
margin: auto;
display: flex;
justify-content: center;
align-items: center;
margin-top: 100px;
margin-bottom: 100px;
}
.sections{
position: relative;
display: inline;
margin-top: 200px;
margin-bottom: 200px;
}
.section{
display: inline;
width: 300px;
margin-right: 50px;
}
section h1,
.section p{
text-align: center;
width: 300px;
}
.section h1{
margin-bottom: 15px;
}
.section p{
margin-bottom: 20px;
}
.first h1,
.third h1{
padding-left: 40px;
}
.img-div{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
/*.first{
position: absolute;
top: 50%;
left: -25%;
transform: translate(-25%, -50%);
}
.second{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.third{
position: absolute;
top: 50%;
left: 100%;
transform: translate(-25%, -50%);
}*/
.web-sites{
margin: auto;
margin-top: 1300px;
width: 100%;
padding-left: 200px;
margin-bottom: 150px;
}
.web-site{
display: inline-block;
width: 100px;
margin-right: 190px;
}
.download-ios :hover{
background-color: #5dccbb;
}
.download-mac :hover{
background-color: #8896ff;
}
.footer{
background-color: #f5f6f8;
padding: 25px 150px 20px 150px;
position: relative;
height: 100%;
}
.footer div,
.footer ul{
display: inline-block;
}
.logo-footer{
height: 100%;
width: 300px;
}
.logo-footer img{
width: 50px;
height: 50px;
}
ul{
list-style: none;
display: inline;
margin-top: 30px;
width: 200px;
}
li{
margin-right: 50px;
margin-bottom: 40px;
transition: 0.2s;
}
.social-media{
position: absolute;
right: 150px;
top: 100px;
}
ul :hover{
color: #33b295;
cursor: pointer;
}
.media-icon{
margin-right: 30px;
}
.media-icon svg :hover{
fill: #33b295;
}
#media screen and (max-width:600px){
.title, .computer-image img, .search-div{
width: 100%;
}
.section{
display: block;
top: 50%;
}
}
<!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">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght#400;600&display=swap" rel="stylesheet">
<title>Clipboard</title>
</head>
<body>
<div class="header">
<div class="logo">
<img src="images/logo.svg" alt="">
</div>
</div>
<div class="main">
<div class="title">
<div class="title-text">
<h1>A history of everything you copy</h1>
<p>Clipboard allows you to track and organize everything you copy.
Instantly acces your clipboard on all your devices.
</p>
</div>
<div class="title-buttons">
<div class="download-ios">
<button>Download for iOS</button>
</div>
<div class="download-mac">
<button>Download for Mac</button>
</div>
</div>
<div class="title-text">
<h1>Keep track of your snippets</h1>
<p>Clipboard instantly stores any item you copy in the cloud,
meaning you can acces your snippets immediatly on all your devices.
Our Mac and iOS apps will help you organize everything.
</p>
</div>
</div>
<div class="computer-div">
<div class="computer-image">
<img src="images/image-computer.png" alt="">
</div>
<div class="all-searches-container">
<div class="search-div">
<h1>Quick Search</h1>
<p>Easily search your snippets by content,
category, web address, application, and more.
</p>
</div>
<div class="search-div">
<h1>iCLoud Sync</h1>
<p>Instantly saves and syncs snippets across all your devices.</p>
</div>
<div class="search-div">
<h1>Complete History</h1>
<p>Retrive any snippets from the first moment you started using app.</p>
</div>
</div>
<div class="title">
<div class="title-text">
<h1>Acces clipboard anywhere</h1>
<p>Whether you're on the go, or at your computer,
you can acces all your Clipboard snippets in a
few simple clicks.
</p>
</div>
<div class="title-img">
<img src="images/image-devices.png" alt="">
</div>
<div class="title-text">
<h1>Supercharge your workflow</h1>
<p>We've got tools to boost your productivity.</p>
</div>
<div class="sections">
<div class="section first">
<img src="images/icon-blacklist.svg" alt="">
<h1>Create blacklists</h1>
<p>Ensure sensitivite information never
makes its way to your clipboard by excluding
certain sources.
</p>
</div>
<div class="section second">
<img src="images//icon-text.svg" alt="">
<h1>Plain text snippets</h1>
<p>Remove unwanted formatting from copied
text for a consistent look.
</p>
</div>
<div class="section third">
<img src="images/icon-preview.svg" alt="">
<h1>Sneak preview</h1>
<p>Quick preview of all snippets on your Clipboard
for easy acces.
</p>
</div>
</div>
</div>
<div class="web-sites">
<div class="web-site">
<img src="images/logo-google.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-ibm.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-microsoft.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-hp.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-vector-graphics.png" alt="">
</div>
</div>
</div>
<div class="title">
<div class="title-text">
<h1>Clipboard for iOS and Mac OS</h1>
<p>Avaible for free on App Store. Download for Mac or iOS, sync
with iCloud and you're ready to start adding to your clipboard.
</p>
</div>
<div class="title-buttons">
<div class="download-ios"><button>Download for iOS</button></div>
<div class="download-mac"><button>Download for Mac</button></div>
</div>
</div>
</div>
<div class="footer">
<div class="logo-footer">
<img src="images/logo.svg" alt="">
</div>
<ul>
<li>FAQs</li>
<li>Contact Us</li>
</ul>
<ul>
<li>Privacy Policy</li>
<li>Press Kit</li>
</ul>
<ul>
<li>Install Guide</li>
</ul>
<div class="social-media">
<div class="media-icon">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z" fill="#4C545C" fill-rule="nonzero"/></svg> </div>
<div class="media-icon">
<svg width="24" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M24 2.557a9.83 9.83 0 01-2.828.775A4.932 4.932 0 0023.337.608a9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616.248c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 1.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 17.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 2.557z" fill="#4C545C" fill-rule="nonzero"/></svg> </div>
<div class="media-icon">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" fill="#4C545C" fill-rule="nonzero"/></svg>
</div>
</div>
</div>
</body>
</html>
I tried to change something, that is why my css looks incomplete.
The box-sizing CSS property sets how the total width and height of an element is calculated.
Try setting all elements box-sizing default to border-box like this:
*{
box-sizing: border-box;
}
body{
width: 100vw!important;
}
Here is a full example:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Bai Jamjuree', sans-serif;
min-width: 100vw;
width: 100vw!important;
max-width: 100vw;
}
h1{
color: #535a62;
}
p{
font-weight: 600;
color: #a6a7a9;
}
.header{
background: url("https://via.placeholder.com/1200");
background-size: cover;
height: 300px;
padding: 130px 0 0 0;
}
.logo{
margin: auto;
width: 125px;
height: 125px;
}
.title{
width: 690px;
height: 225px;
margin: auto;
margin-bottom: 100px;
}
.title-text h1{
text-align: center;
margin-bottom: 35px;
font-size: 2.75rem;
}
.title-text p{
text-align: center;
font-size: 1.25rem;
margin-bottom: 50px;
}
.title-buttons{
margin: auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 170px;
}
.download-ios button,
.download-mac button{
display: inline;
margin-right: 20px;
height: 50px;
width: 225px;
border-radius: 30px;
outline: none;
border: none;
font-size: 18px;
color: #fff;
padding: 10px 20px;
transition: 0.2s;
}
.download-ios button{
background-color: #26bba5;
border-bottom: 3px solid #18a08c;
}
.download-mac button{
background-color: #6174ff;
border-bottom: 3px solid #5362d7;
}
.computer-div{
margin-top: 500px;
position: relative;
}
.computer-image img{
display: inline;
margin-left: -30px;
width: 900px;
margin-bottom: 100px;
}
.all-searches-container{
position: absolute;
top: 50px;
right: 265px;
}
.search-div{
width: 350px;
}
.search-div h1{
margin-bottom: 15px;
}
.search-div p{
margin-bottom: 50px;
}
.title-img{
margin: auto;
display: flex;
justify-content: center;
align-items: center;
margin-top: 100px;
margin-bottom: 100px;
}
.sections{
position: relative;
display: inline;
margin-top: 200px;
margin-bottom: 200px;
}
.section{
display: inline;
width: 300px;
margin-right: 50px;
}
section h1,
.section p{
text-align: center;
width: 300px;
}
.section h1{
margin-bottom: 15px;
}
.section p{
margin-bottom: 20px;
}
.first h1,
.third h1{
padding-left: 40px;
}
.img-div{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
/*.first{
position: absolute;
top: 50%;
left: -25%;
transform: translate(-25%, -50%);
}
.second{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.third{
position: absolute;
top: 50%;
left: 100%;
transform: translate(-25%, -50%);
}*/
.web-sites{
margin: auto;
margin-top: 1300px;
width: 100%;
padding-left: 200px;
margin-bottom: 150px;
}
.web-site{
display: inline-block;
width: 100px;
margin-right: 190px;
}
.download-ios :hover{
background-color: #5dccbb;
}
.download-mac :hover{
background-color: #8896ff;
}
.footer{
background-color: #f5f6f8;
padding: 25px 150px 20px 150px;
position: relative;
height: 100%;
}
.footer div,
.footer ul{
display: inline-block;
}
.logo-footer{
height: 100%;
width: 300px;
}
.logo-footer img{
width: 50px;
height: 50px;
}
ul{
list-style: none;
display: inline;
margin-top: 30px;
width: 200px;
}
li{
margin-right: 50px;
margin-bottom: 40px;
transition: 0.2s;
}
.social-media{
position: absolute;
right: 150px;
top: 100px;
}
ul :hover{
color: #33b295;
cursor: pointer;
}
.media-icon{
margin-right: 30px;
}
.media-icon svg :hover{
fill: #33b295;
}
#media screen and (max-width:600px){
.title, .computer-image img, .search-div{
width: 100%;
}
.section{
display: block;
top: 50%;
}
}
<!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">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght#400;600&display=swap" rel="stylesheet">
<title>Clipboard</title>
</head>
<body>
<div class="header">
<div class="logo">
<img src="images/logo.svg" alt="">
</div>
</div>
<div class="main">
<div class="title">
<div class="title-text">
<h1>A history of everything you copy</h1>
<p>Clipboard allows you to track and organize everything you copy.
Instantly acces your clipboard on all your devices.
</p>
</div>
<div class="title-buttons">
<div class="download-ios">
<button>Download for iOS</button>
</div>
<div class="download-mac">
<button>Download for Mac</button>
</div>
</div>
<div class="title-text">
<h1>Keep track of your snippets</h1>
<p>Clipboard instantly stores any item you copy in the cloud,
meaning you can acces your snippets immediatly on all your devices.
Our Mac and iOS apps will help you organize everything.
</p>
</div>
</div>
<div class="computer-div">
<div class="computer-image">
<img src="images/image-computer.png" alt="">
</div>
<div class="all-searches-container">
<div class="search-div">
<h1>Quick Search</h1>
<p>Easily search your snippets by content,
category, web address, application, and more.
</p>
</div>
<div class="search-div">
<h1>iCLoud Sync</h1>
<p>Instantly saves and syncs snippets across all your devices.</p>
</div>
<div class="search-div">
<h1>Complete History</h1>
<p>Retrive any snippets from the first moment you started using app.</p>
</div>
</div>
<div class="title">
<div class="title-text">
<h1>Acces clipboard anywhere</h1>
<p>Whether you're on the go, or at your computer,
you can acces all your Clipboard snippets in a
few simple clicks.
</p>
</div>
<div class="title-img">
<img src="images/image-devices.png" alt="">
</div>
<div class="title-text">
<h1>Supercharge your workflow</h1>
<p>We've got tools to boost your productivity.</p>
</div>
<div class="sections">
<div class="section first">
<img src="images/icon-blacklist.svg" alt="">
<h1>Create blacklists</h1>
<p>Ensure sensitivite information never
makes its way to your clipboard by excluding
certain sources.
</p>
</div>
<div class="section second">
<img src="images//icon-text.svg" alt="">
<h1>Plain text snippets</h1>
<p>Remove unwanted formatting from copied
text for a consistent look.
</p>
</div>
<div class="section third">
<img src="images/icon-preview.svg" alt="">
<h1>Sneak preview</h1>
<p>Quick preview of all snippets on your Clipboard
for easy acces.
</p>
</div>
</div>
</div>
<div class="web-sites">
<div class="web-site">
<img src="images/logo-google.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-ibm.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-microsoft.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-hp.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-vector-graphics.png" alt="">
</div>
</div>
</div>
<div class="title">
<div class="title-text">
<h1>Clipboard for iOS and Mac OS</h1>
<p>Avaible for free on App Store. Download for Mac or iOS, sync
with iCloud and you're ready to start adding to your clipboard.
</p>
</div>
<div class="title-buttons">
<div class="download-ios"><button>Download for iOS</button></div>
<div class="download-mac"><button>Download for Mac</button></div>
</div>
</div>
</div>
<div class="footer">
<div class="logo-footer">
<img src="images/logo.svg" alt="">
</div>
<ul>
<li>FAQs</li>
<li>Contact Us</li>
</ul>
<ul>
<li>Privacy Policy</li>
<li>Press Kit</li>
</ul>
<ul>
<li>Install Guide</li>
</ul>
<div class="social-media">
<div class="media-icon">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z" fill="#4C545C" fill-rule="nonzero"/></svg> </div>
<div class="media-icon">
<svg width="24" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M24 2.557a9.83 9.83 0 01-2.828.775A4.932 4.932 0 0023.337.608a9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616.248c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 1.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 17.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 2.557z" fill="#4C545C" fill-rule="nonzero"/></svg> </div>
<div class="media-icon">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" fill="#4C545C" fill-rule="nonzero"/></svg>
</div>
</div>
</div>
</body>
</html>