I'm having issues placing a small image at the right of a container.
For one reason or another, the container app-banniere-utilisateur__stand
is trying to grow in width, even though I added flex-grow: 0;
While searching, I found out that the img tag within that container
is actually enforcing it's max-width as if I wrote width. (see comment at the end of CSS)
On the code snippet, I added a red background on the extra-width that shouldn't exists.
I'm not sure how it happened, any idea on how to fix this (beside fixing img width, which isn't the point here) ?
html {
font-size: 16px;
font-family: "PT Sans", sans-serif;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.app-banniere-utilisateur {
display: flex;
flex-direction: row;
height: 74px;
padding: 6px 10px;
max-width: 300px;
}
.app-banniere-utilisateur .app-banniere-utilisateur__avatar {
border: 3px solid #aaaaaa;
background-image: url(https://img-os-static.mihoyo.com/avatar/avatar22.png);
background-size: cover;
border-radius: 50%;
margin: auto 10px auto 0;
flex-shrink: 0;
width: 60px;
}
.app-banniere-utilisateur .app-banniere-utilisateur__avatar.online {
border-color: #54c242;
}
.app-banniere-utilisateur .app-banniere-utilisateur__avatar:after {
content: "";
display: block;
padding-top: 100%;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
padding: 3px 0;
position: relative;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info div.app-banniere-utilisateur__info-nom {
font-size: 20px;
font-weight: bold;
margin-bottom: auto;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info div.app-banniere-utilisateur__info-nav {
background-color: white;
bottom: -38px;
color: #2196f3;
display: flex;
flex-direction: row;
left: 0;
width: 100%;
position: absolute;
transition: bottom 150ms;
transition-timing-function: ease-in;
z-index: 1;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info div.app-banniere-utilisateur__info-nav i {
font-size: 28px;
margin-right: 8px;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info div.app-banniere-utilisateur__info-nav i:last-child {
margin-right: 0;
}
.app-banniere-utilisateur .app-banniere-utilisateur__stand {
background-color: red;
flex-grow: 0;
flex-shrink: 0;
text-align: right;
}
.app-banniere-utilisateur .app-banniere-utilisateur__stand img {
max-height: 100%;
/* max-width is pushing parent width */
max-width: 80px;
}
.app-banniere-utilisateur:hover .app-banniere-utilisateur__info .app-banniere-utilisateur__info-nav {
bottom: 0;
transition: bottom 200ms;
transition-timing-function: ease-in-out;
}
.app-banniere-utilisateur {
border: 1px dashed;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght#0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js" defer></script>
</head>
<body>
<div class="app-banniere-utilisateur">
<div class="app-banniere-utilisateur__avatar online"></div>
<div class="app-banniere-utilisateur__info">
<div class="app-banniere-utilisateur__info-nom">FirstName LastName</div>
<div class="app-banniere-utilisateur__info-desc">Short user description</div>
<div class="app-banniere-utilisateur__info-nav">
<i class="material-icons">info</i>
<i class="material-icons">message</i>
<i class="material-icons">videocam</i>
</div>
</div>
<div class="app-banniere-utilisateur__stand">
<img src="https://i.pinimg.com/280x280_RS/35/7c/92/357c92d4bbd9b59bee2ef9d89d088f6d.jpg" alt="3D at Home">
</div>
</div>
</body>
</html>
Related
can anyone help me with how can I center my hamburger Icon on my sidebar? currently, when I decrease the sidebar width it's not centered at all. Can anyone help me how to accomplish it? I've also tried using justify-content: center on the main class however still not working.
let btnSidebar = document.querySelector(".bx-menu")
let sidebar = document.querySelector(".nk-sidebar")
btnSidebar.addEventListener("click", ()=> {
sidebar.classList.toggle("close")
})
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.nk-sidebar {
position: fixed;
top: 0;
height: 100%;
width: 270px;
display: flex;
flex-direction: column;
border-right: 1px solid #e6e5e5;
padding: 10px;
transition: 0.3s ease all;
}
.nk-sidebar.close {
width: 73px;
}
.nk-sidebar .nk-sb-hrd {
display: flex;
align-items: center;
/* flex: 0 0 50px; */
/* padding: 10px; */
width: 100%;
gap: 10px;
background: black;
}
.nk-sidebar .nk-sb-hrd .nk-sb-logo {
font-size: 16px;
color: #fff;
font-weight: 600;
}
.nk-sidebar .nk-sb-nav {
flex: 1;
}
.nk-sidebar .nk-sb-footer {
display: flex;
flex-direction: column;
}
.nk-sidebar .nk-sb-hrd .nk-sb-logo {
min-width: 50px;
height: 50px;
width: 50px;
padding: 5px;
border-radius: 10px;
}
.nk-sb-hr-ham {
height: 40px;
min-width: 40px;
border: 1px solid #e6e5e5;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
justify-content: center;
cursor: pointer;
background: red;
}
.ham {
width: 20px;
height: 2px;
background: #0057d9;
}
.nk-sb-company {
font-weight: 600;
color: #0057d9;
font-size: 14px;
white-space: nowrap;
}
.nk-section {
position: relative;
left: 270px;
width: calc(100% - 270px);
padding: 10px;
height: 100vh;
background: yellow;
transition: 0.3s ease all;
}
.nk-sidebar.close .nk-sb-company {
opacity: 0;
pointer-events: none;
}
.nk-sidebar.close ~ .nk-section {
left: 73px;
width: calc(100% - 73px);
}
<!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>Document</title>
<link rel="stylesheet" href="../materials/fonts/new/fonts.css">
<link rel="stylesheet" href="../materials/css/dashboard.css">
<script src="../materials/plugins/jquery-3.6.0.js"></script>
<link href='https://unpkg.com/boxicons#2.1.2/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="nk-sidebar">
<div class="nk-sb-hrd">
<div class="nk-sb-hr-ham">
<div class="ham top"></div>
<div class="ham mid"></div>
<div class="ham bot"></div>
</div>
<div class="nk-sb-company">Zybm Business Applications</div>
</div>
<div class="nk-sb-nav">
</div>
<div class="nk-sb-footer">
asdasd
</div>
</div>
<div class="nk-section">
<i class="bx bx-menu"></i>
</div>
<script type="text/javascript" src="../materials/js/dashboard.js"></script>
</body>
</html>
You can use like that
<div style="
display: flex;
justify-content: space-around;
">...CONTENT...</div>
I edited your code also.
let btnSidebar = document.querySelector(".bx-menu")
let sidebar = document.querySelector(".nk-sidebar")
btnSidebar.addEventListener("click", ()=> {
sidebar.classList.toggle("close")
})
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.nk-sidebar {
position: fixed;
top: 0;
height: 100%;
width: 270px;
display: flex;
flex-direction: column;
border-right: 1px solid #e6e5e5;
padding: 10px;
transition: 0.3s ease all;
}
.nk-sidebar.close {
width: 73px;
}
.nk-sidebar .nk-sb-hrd {
display: flex;
align-items: center;
/* flex: 0 0 50px; */
/* padding: 10px; */
width: 100%;
gap: 10px;
background: black;
}
.nk-sidebar .nk-sb-hrd .nk-sb-logo {
font-size: 16px;
color: #fff;
font-weight: 600;
}
.nk-sidebar .nk-sb-nav {
flex: 1;
}
.nk-sidebar .nk-sb-footer {
display: flex;
flex-direction: column;
}
.nk-sidebar .nk-sb-hrd .nk-sb-logo {
min-width: 50px;
height: 50px;
width: 50px;
padding: 5px;
border-radius: 10px;
}
.nk-sb-hr-ham {
height: 40px;
min-width: 40px;
border: 1px solid #e6e5e5;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
justify-content: center;
cursor: pointer;
background: red;
}
.ham {
width: 20px;
height: 2px;
background: #0057d9;
}
.nk-sb-company {
font-weight: 600;
color: #0057d9;
font-size: 14px;
white-space: nowrap;
}
.nk-section {
position: relative;
left: 270px;
width: calc(100% - 270px);
padding: 10px;
height: 100vh;
background: yellow;
transition: 0.3s ease all;
}
.nk-sidebar.close .nk-sb-company {
opacity: 0;
pointer-events: none;
}
.nk-sidebar.close ~ .nk-section {
left: 73px;
width: calc(100% - 73px);
}
<!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>Document</title>
<link rel="stylesheet" href="../materials/fonts/new/fonts.css">
<link rel="stylesheet" href="../materials/css/dashboard.css">
<script src="../materials/plugins/jquery-3.6.0.js"></script>
<link href='https://unpkg.com/boxicons#2.1.2/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="nk-sidebar">
<div class="nk-sb-hrd">
<div class="nk-sb-hr-ham">
<div class="ham top"></div>
<div class="ham mid"></div>
<div class="ham bot"></div>
</div>
<div class="nk-sb-company">Zybm Business Applications</div>
</div>
<div class="nk-sb-nav">
</div>
<div class="nk-sb-footer">
asdasd
</div>
</div>
<div class="nk-section">
<div style="display:flex; justify-content: space-around;"><i class="bx bx-menu"></i></div>
</div>
<script type="text/javascript" src="../materials/js/dashboard.js"></script>
</body>
</html>
EDIT : https://codepen.io/agokselb/pen/eYrYBMP
I'm trying to make the text-info element display only when I hover over the container element using only CSS and no JS and it doesn't work, would love some advice.
I was assuming it had something to do with the display flex instead of display block so I attempted that too, but it didn't help.
Note that even without the hover, the text doesn't display on the page and I can't tell why.
body {
color: #2f80ed;
font-family: Avenir, Helvetica, Arial, sans-serif;
margin: 0;
display: flex;
height: 100vh;
}
p {
margin: 0;
}
.container {
width: 520px;
margin: auto;
}
.container img {
width: 100%;
}
.text {
width: 400px;
margin: 0 auto;
cursor: pointer;
}
.text-code {
text-align: center;
font-size: 120px;
font-weight: 400;
}
.container:hover+.text-info {
display: flex;
}
.text-info {
display: none;
text-align: center;
font-size: 20px;
font-weight: 400;
opacity: 0;
transition: opacity .4s ease-in-out;
}
footer {
width: 100%;
position: absolute;
bottom: 30px;
}
footer p {
margin: auto;
font-size: 16px;
}
footer a {
color: #2f80ed;
}
<div class="container">
<img src="empty-boxes.svg" alt="error" />
<div class="text">
<p class="text-code">404</p>
<p class="text-info">
404 is an error.
</p>
</div>
</div>
<footer>
<p>Go back.</p>
</footer>
You are using the wrong css selector for your hover style. You are using the + selector which is the sibling selector and .text-info is a child not a sibling of .container.
Also, you would need to set your opacity to 1 on hover so that you can see it.
Like this:
.container:hover .text-info {
display: flex;
opacity: 1;
}
body {
color: #2f80ed;
font-family: Avenir, Helvetica, Arial, sans-serif;
margin: 0;
display: flex;
height: 100vh;
}
p {
margin: 0;
}
.container {
width: 520px;
margin: auto;
}
.container img {
width: 100%;
}
.text {
width: 400px;
margin: 0 auto;
cursor: pointer;
}
.text-code {
text-align: center;
font-size: 120px;
font-weight: 400;
}
.container:hover .text-info {
display: flex;
opacity: 1;
}
.text-info {
display: none;
text-align: center;
font-size: 20px;
font-weight: 400;
opacity: 0;
transition: opacity .4s ease-in-out;
}
footer {
width: 100%;
position: absolute;
bottom: 30px;
}
footer p {
margin: auto;
font-size: 16px;
}
footer a {
color: #2f80ed;
}
<div class="container">
<img src="empty-boxes.svg" alt="error" />
<div class="text">
<p class="text-code">404</p>
<p class="text-info">
404 is an error.
</p>
</div>
</div>
<footer>
<p>Go back.</p>
</footer>
As long as text-info opacity is set to 0 normally, you can use the following sibling selector ~ in your CSS to set the opacity to 1 on hover. See below.
.text-code:hover ~ .text-info {
opacity: 1;
}
See it in action
body {
color: #2f80ed;
font-family: Avenir, Helvetica, Arial, sans-serif;
margin: 0;
display: flex;
height: 100vh;
}
p {
margin: 0;
}
.container {
width: 520px;
margin: auto;
}
.container img {
width: 100%;
}
.text {
width: 400px;
margin: 0 auto;
cursor: pointer;
}
.text-code {
text-align: center;
font-size: 120px;
font-weight: 400;
}
.text-info {
color: black;
text-align: center;
font-size: 20px;
font-weight: 400;
opacity: 0;
transition: opacity .4s ease-in-out;
}
footer {
width: 100%;
position: absolute;
bottom: 30px;
}
footer p {
margin: auto;
font-size: 16px;
}
footer a {
color: #2f80ed;
}
.text-code:hover ~ .text-info {
opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>404 Page</title>
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<img src="empty-boxes.svg" alt="error" />
<div class="text">
<p class="text-code">404</p>
<p class="text-info">
404 is an error.
</p>
</div>
</div>
<footer>
<p>Go back.</p>
</footer>
</body>
</html>
Everything is pretty much ready, the only issue I have is that bottom circle does not want to hide beyond body borders, even though the property is set to hidden. Could anyone take a look at the code and explain it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="stylesheet" href="normalize.css" type="text/css">
<title>Profile card component</title>
</head>
<body>
<div class="gradient-top">
</div>
<div class="gradient-bottom">
</div>
<div class="container">
<!-- BACKGROUND THROUGH CSS -->
<div class="personal">
<div class="background">
<img src="images/bg-pattern-card.svg" alt="">
</div>
<img class ="victor" src="images/image-victor.jpg" alt="personal photo">
<h1>Victor Crest <span>26</span> </h1>
<h2>London</h2>
</div>
<div class="properties">
<div class="followers">
80K
<span class="property">Followers</span>
</div>
<div class="likes">
803K
<span class="property">Likes</span>
</div>
<div class="photos">
1.4K
<span class="property">Photos</span>
</div>
</div>
</div>
</body>
</html>
:root {
font-size: 62.5%;
font-family: "Kumbh Sans", sans-serif;
box-sizing: border-box;
}
body {
background-color: #19a1ae;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
position: relative;
}
/* MAIN CARD SECTION */
.container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
overflow: hidden;
border-radius: 20px;
margin-right: 2.5rem;
margin-left: 2.5rem;
box-shadow: 5px 5px 20px 10px rgba(0, 0, 0, 0.1),
-5px -5px 20px 10px rgba(0, 0, 0, 0.1);
}
.personal {
background-color: #ffffff;
}
.personal .victor {
display: inline;
margin-top: -55px;
border: 6px solid #ffffff;
border-radius: 50%;
}
h1 {
color: #2e3349;
}
h1 span {
font-weight: 400;
color: #6b7082;
}
h2 {
font-size: 1.4rem;
font-weight: 400;
color: #6b7082;
padding-bottom: 1em;
}
/* STAT SECTION */
.properties {
display: flex;
justify-content: space-around;
align-items: center;
padding: 1.3em 1em;
background-color: #ffffff;
width: 100%;
font-size: 1.8rem;
font-weight: bold;
color: #2e3349;
border-top: 1px solid #e8e9ec;
}
.property {
display: flex;
flex-direction: column;
color: #6b7082;
font-weight: 400;
font-size: 1rem;
letter-spacing: 0.15em;
padding-top: 0.8em;
}
/* CIRCLES */
.gradient-top {
z-index: -10;
position: absolute;
background-image: url("images/bg-pattern-top.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
top: -35%;
left: -31.5%;
}
.gradient-bottom {
z-index: -10;
position: absolute;
background-image: url("images/bg-pattern-bottom.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
bottom: -50%;
right: -31%;
}
}
/* the bottom one causes the problem fsr*/
Repo link: https://github.com/ViyanMd/personal-card
Pages link: https://viyanmd.github.io/personal-card/
The issue was fixed by wrapping the whole content in another div, applying to it properties, that were applied to body before. For some reason the child element started to behave differently and the issue was solved.
I saw many people who have the same problem here but none of the solutions on their questions worked for me. I have a div with a button and an input text inside and their heights don't match, even when I set fixed px values to them. The button is always a bit "taller."
Here's my HTML & CSS https://jsfiddle.net/7yd0p5jk/
This is where I'm facing problems:
#search-div {
width: auto;
height: auto;
display: flex;
gap: 0.4rem;
}
.show-btn {
padding: 0.6rem;
background: var(--light-color);
border-radius: 5px;
border: none;
transition: ease-in 300ms;
font-size: 1.2rem;
cursor: pointer;
height: 100%;
}
.show-btn:hover {
background: var(--lighter-color);
transition: ease-in 300ms;
}
#search {
background: var(--lighter-color);
color: var(--darker-color);
height: 100%;
width: 100%;
font-size: 1.2rem;
padding: 0.4rem 1rem;
border: black 2px solid;
border-radius: 2px;
}
You have padding: 0.6rem; set on .show-btn, while you also have padding: 0.6rem 1rem; property on #search element
Fixing this, you will get the following result:
/* GENERAL */
:root {
--light-color: #ccc;
--lighter-color: #f4f4f4;
--dark-color: #333;
--darker-color: #222;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--dark-color);
color: var(--light-color);
font-family: "Trebuchet MS";
}
/* HEADER */
#header {
background: var(--darker-color);
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
justify-content: space-between;
padding: 1.4rem 10rem;
width: 100%;
}
#logo {
font-size: 2.4rem;
font-weight: 200;
}
#search-div {
width: auto;
height: auto;
display: flex;
gap: 0.4rem;
}
.show-btn {
padding: 0.6rem;
background: var(--light-color);
border-radius: 5px;
border: none;
transition: ease-in 300ms;
font-size: 1.2rem;
cursor: pointer;
height: 100%;
}
.show-btn:hover {
background: var(--lighter-color);
transition: ease-in 300ms;
}
#search {
background: var(--lighter-color);
color: var(--darker-color);
height: 100%;
width: 100%;
font-size: 1.2rem;
padding: 0.6rem 1rem;
border: black 2px solid;
border-radius: 2px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contacts List</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/3ad7573e76.js" crossorigin="anonymous"></script>
</head>
<body>
<header id="header">
<div id="logo-div">
<h1 id="logo">
Contact List
</h1>
</div>
<form id="search-div">
<button class="show-btn"><i class="fas fa-search"></i></button>
<input id="search" type="text" placeholder="Search contacts...">
</form>
</header>
<script src="js/main.js"></script>
</body>
</html>
Then, you maybe want to fix the height corrispondency of both the items, which can be done implementing margin-top: 2px property on .show-btn element, here's the result:
/* GENERAL */
:root {
--light-color: #ccc;
--lighter-color: #f4f4f4;
--dark-color: #333;
--darker-color: #222;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--dark-color);
color: var(--light-color);
font-family: "Trebuchet MS";
}
/* HEADER */
#header {
background: var(--darker-color);
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
justify-content: space-between;
padding: 1.4rem 10rem;
width: 100%;
}
#logo {
font-size: 2.4rem;
font-weight: 200;
}
#search-div {
width: auto;
height: auto;
display: flex;
gap: 0.4rem;
}
.show-btn {
padding: 0.6rem;
background: var(--light-color);
border-radius: 5px;
border: none;
transition: ease-in 300ms;
font-size: 1.2rem;
cursor: pointer;
height: 100%;
margin-top: 2px;
}
.show-btn:hover {
background: var(--lighter-color);
transition: ease-in 300ms;
}
#search {
background: var(--lighter-color);
color: var(--darker-color);
height: 100%;
width: 100%;
font-size: 1.2rem;
padding: 0.6rem 1rem;
border: black 2px solid;
border-radius: 2px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contacts List</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/3ad7573e76.js" crossorigin="anonymous"></script>
</head>
<body>
<header id="header">
<div id="logo-div">
<h1 id="logo">
Contact List
</h1>
</div>
<form id="search-div">
<button class="show-btn"><i class="fas fa-search"></i></button>
<input id="search" type="text" placeholder="Search contacts...">
</form>
</header>
<script src="js/main.js"></script>
</body>
</html>
To urigolate the height of the components, you need to remove the height: 100% and add border: none in #search, and add an align-items: stretch to #search-div.
/* GENERAL */
:root {
--light-color: #ccc;
--lighter-color: #f4f4f4;
--dark-color: #333;
--darker-color: #222;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--dark-color);
color: var(--light-color);
font-family: "Trebuchet MS";
}
/* HEADER */
#header {
background: var(--darker-color);
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
justify-content: space-between;
padding: 1.4rem 10rem;
width: 100%;
}
#logo {
font-size: 2.4rem;
font-weight: 200;
}
#search-div {
width: auto;
height: auto;
display: flex;
align-items: stretch; /*add*/
gap: 0.4rem;
}
.show-btn {
padding: 0.6rem;
background: var(--light-color);
border-radius: 5px;
border: none;
transition: ease-in 300ms;
font-size: 1.2rem;
cursor: pointer;
height: 100%;
}
.show-btn:hover {
background: var(--lighter-color);
transition: ease-in 300ms;
}
#search {
background: var(--lighter-color);
color: var(--darker-color);
/*height: 100%;*/ /*remove*/
width: 100%;
font-size: 1.2rem;
padding: 0.4rem 1rem;
border: black 2px solid;
border-radius: 2px;
border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contacts List</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/3ad7573e76.js" crossorigin="anonymous"></script>
</head>
<body>
<header id="header">
<div id="logo-div">
<h1 id="logo">
Contact List
</h1>
</div>
<form id="search-div">
<button class="show-btn"><i class="fas fa-search"></i></button>
<input id="search" type="text" placeholder="Search contacts...">
</form>
</header>
<script src="js/main.js"></script>
</body>
</html>
I'm trying to make css drop-down menu responsive according to the browser window.
I want the menu text to stay centered according to the browser window
Please see this video as examples of the intended behavior:
https://youtu.be/ZPWforRw_cc?t=34m23s
/* ------------------------------------------ */
/* BASIC SETUP */
/* ------------------------------------------ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page-wrap {
width: 1216px;
margin: 0 auto;
}
/* ------------------------------------------ */
/* PAGE CONTENT */
/* ------------------------------------------ */
.box1 {
height: 30px;
width: 300px;
background: #8242b1;
}
.box2 {
height: 30px;
width: 300px;
background: #b14242;
}
.box3 {
height: 30px;
width: 300px;
background: #424bb1;
}
.page-content {
display:flex;
justify-content: center;
transition: ease-in-out 0.3s;
position:relative;
top: -260px;
z-index: 0; }
.toggle {
transition: ease-in-out 0.3s;
text-decoration: none;
font-size: 30px;
color: #eaeaea;
position:relative;
top: -120px;
left: 20px;
z-index: 1; }
.toggle:hover {
color:#cccccc; }
.sidebar {
display:flex;
justify-content: center;
align-items: center;
transition: ease-in-out 0.3s;
position: relative;
top: -220px;
bottom: 0px;
left: 0px;
height: 220px;
width: auto;
padding: 30px;
background: #333;
z-index: 1; }
.sidebar li {
display:flex;
justify-content: center;
list-style: none;
color: rgba(255, 255, 255,0.8);
font-family: 'Lato', sans-serif;
font-size: 16px;
margin-bottom: 16px;
cursor: pointer; }
.sidebar li:hover {
color: rgba(255, 255, 255,1); }
#sidebartoggler {
display: none; }
#sidebartoggler:checked + .page-wrap .sidebar {
top: 0px; }
#sidebartoggler:checked + .page-wrap .toggle {
top: 100px; }
#sidebartoggler:checked + .page-wrap .page-content {
padding-top: 220px; }
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
</head>
<body>
<input type="checkbox" id="sidebartoggler" name="" value="">
<div class="page-wrap">
<div class="sidebar">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Clients</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<label for="sidebartoggler" class="toggle">☰</label>
<div class="page-content">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</div>
</body>
</html>
this will work,
.page-wrap{
width:1216px;
}
+ use Media Queries as follows:
#media only screen and (max-width: 1216px) {
.page-wrap{
width: 100%;}
}