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
Related
I use https://boxicons.com/ to display the 3 icones. I share you here the code.
Except that, I would like to download the icons to keep them in a folder.
Here is the result with uploaded images:
The code is here
I have two problems:
The white color is gone and it is replaced with black.
There is a horizontal line below the image that has disappeared
Do you know how I could get the same result as in the first illustration?
I just changed this
<span class="form__login-text">Our partners</span>
<i class='bx bx-book-content'></i>
<i class='bx bx-building-house'></i>
<i class='bx bx-wallet-alt'></i>
In this
<span class="form__login-text">Our partners</span>
<img src="https://zupimages.net/up/22/33/qad0.png" alt="image">
<img src="https://zupimages.net/up/22/33/8mhc.png" alt="image">
<img src="https://zupimages.net/up/22/33/qq74.png" alt="image">
Thanks
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
}
.l-form {
position: relative;
height: 100vh;
overflow: hidden;
}
.shape1,
.shape2 {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
}
.shape1 {
top: -7rem;
left: -3.5rem;
background: linear-gradient(180deg, #239CD3 0%, rgba(196, 196, 196, 0) 100%);
}
.shape2 {
bottom: -6rem;
right: -5.5rem;
background: linear-gradient(180deg, #239CD3 0%, rgba(196, 196, 196, 0) 100%);
transform: rotate(180deg);
}
.form {
height: 100vh;
display: grid;
justify-content: center;
align-items: center;
padding: 0 1rem;
}
.form__content {
width: 290px;
}
.form__img {
display: none;
}
.form__title {
font-size: 2rem;
font-weight: 500;
margin-bottom: 2rem;
color: #239CD3;
}
.form__div {
position: relative;
display: grid;
grid-template-columns: 7% 93%;
margin-bottom: 1rem;
padding: 0.25rem 0;
border-bottom: 1px solid #8590AD;
}
.form__div.focus {
border-bottom: 1px solid #8590AD;
}
.form__div.focus .form__icon {
color: red;
}
.form__div.focus .form__label {
top: -1.5rem;
font-size: 0.875rem;
color: red;
}
.form__div-one {
margin-bottom: 3rem;
}
.form__icon {
font-size: 1.5rem;
color: #8590AD;
transition: 0.3s;
}
.form__label {
display: block;
position: absolute;
left: 0.75rem;
top: 0.25rem;
font-size: 0.938rem;
transition: 0.3s;
}
.form__div-input {
position: relative;
}
.form__input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background: none;
padding: 0.5rem 0.75rem;
font-size: 1.2rem;
color: #8590AD;
transition: 0.3s;
}
.form__button {
width: 100%;
padding: 1rem;
font-size: 0.938rem;
outline: none;
border: none;
margin-bottom: 3rem;
background-color: #239CD3;
color: #fff;
border-radius: 0.5rem;
cursor: pointer;
transition: 0.3s;
}
.form__button:hover {
box-shadow: 0px 15px 36px rgba(0, 0, 0, 0.15);
}
.form__login {
text-align: center;
}
.form__login-text {
display: block;
font-size: 0.938rem;
margin-bottom: 1rem;
color: #239CD3;
}
.form__login-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
margin-right: 1rem;
padding: 0.5rem;
background-color: #8590AD;
color: #fff;
font-size: 1.25rem;
border-radius: 50%;
}
.form__login-icon:hover {
background-color: #239CD3;
}
/*===== MEDIA QUERIS =====*/
#media screen and (min-width: 968px) {
.shape1 {
width: 400px;
height: 400px;
top: -11rem;
left: -6.5rem;
}
.shape2 {
width: 300px;
height: 300px;
right: -6.5rem;
}
.form {
grid-template-columns: 1.5fr 1fr;
padding: 0 2rem;
}
.form__content {
width: 320px;
}
.form__img {
display: block;
width: 700px;
justify-self: center;
}
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css" rel="stylesheet" />
<link href='https://cdn.jsdelivr.net/npm/boxicons#2.0.5/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="l-form">
<div class="shape1"></div>
<div class="shape2"></div>
<div class="form">
<img src="https://zupimages.net/up/22/33/al0n.png" alt="image" class="form__img" style="width: 70%">
<form class="form__content">
<h1 class="form__title">Login</h1>
<div class="form__div form__div-one">
<div class="form__icon">
<i class='bx bx-user-circle'></i>
</div>
<div class="form__div-input">
<label for="user" class="form__label"></label>
<input type="text" class="form__input" name="user" [(ngModel)]="loginForm.user" placeholder='Username'>
</div>
</div>
<input type="submit" class="form__button" value='Login'>
<div class="form__login">
<span class="form__login-text">Our partners</span>
<!--
<i class='bx bx-book-content'></i>
<i class='bx bx-building-house'></i>
<i class='bx bx-wallet-alt'></i>
-->
<img src="https://zupimages.net/up/22/33/qad0.png" alt="image">
<img src="https://zupimages.net/up/22/33/8mhc.png" alt="image">
<img src="https://zupimages.net/up/22/33/qq74.png" alt="image">
</div>
</form>
</div>
</div>
</body>
</html>
It seems the image you are using has black foreground. You can use .form__login-icon img { filter: invert(1); } to make the foreground white. For the horizontal line use box-shadow: 0 2px #000;. Otherwise use an SVG image and apply the fill color of your choice.
the problem is with the images. those images have black background though they are in PNG format.
You can use online tools, Adobe illustrator or photoshop to remove the background from those images. Or you can use images in SVG format
How can I keep the dropdown open on clicking pumpkin icon be able to type something and close the dropdown when clicking anywhere else on screen except dropdown?
I know that something needs to be done here:
.header-bar-mobile-drop-down__icon-button:focus
.header-bar-mobile-drop-down__item
Note: trying to avoid using JS.
I tried to use &:focus in the parent class but it didn't work
.header-bar__top {
height: 3.5rem;
background-color: greenyellow;
z-index: 100;
/* box-shadow: $header-bar-shadow; */
padding-top: 15px;
}
.header-bar__container {
position: relative;
height: 100%;
margin-right: auto;
margin-left: auto;
max-width: 1152px;
}
.header-bar-mobile-drop-down {
display: inline;
}
.header-bar-mobile-drop-down__icon-button {
color: darkblue;
border: none;
background-color: transparent;
font-size: 1.5rem;
float: right;
line-height: 1.5rem;
cursor: pointer;
}
.header-bar-mobile-drop-down__item {
visibility: hidden;
opacity: 0;
border: 1px solid orange;
}
.header-bar-mobile-drop-down__icon-button:focus
+ .header-bar-mobile-drop-down__item {
visibility: visible;
opacity: 1;
margin-top: 41px;
height: 4.25rem;
background-color: palegreen;
display: inline-flex;
opacity: 1;
align-items: center;
text-align: center;
justify-content: center;
width: 100%;
}
.header-bar-utility {
height: 100%;
padding: 0 0.5rem;
display: flex;
align-items: center;
float: left;
color: pink;
background-color: transparent;
border: none;
font-size: 16px;
line-height: 1.5rem;
text-decoration: none;
cursor: pointer;
}
.header-bar-utility__icon {
display: inline;
font-size: 1.5rem;
}
.header-bar {
height: 3.5rem;
box-shadow: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./test.css" />
<title>Dropdown</title>
</head>
<body>
<div class="header-bar">
<div class="header-bar__top">
<div class="header-bar__container">
<div class="header-bar-mobile-drop-down">
<button
class="header-bar-mobile-drop-down__icon-button"
tabindex="1"
>
🎃 1
</button>
<div class="header-bar-mobile-drop-down__item">
<input placeholder="Search" />
</div>
</div>
</div>
</div>
</div>
<h1>Text overlayed</h1>
</body>
</html>
Got the answer which involves using one of new css attributes :focus-within
And moving the dropdown code above to make it a child of the clickable tag, which in my case is button
NOTE: this solution will not work for IE 11
Here is the code:
.header-bar__top {
height: 3.5rem;
background-color: greenyellow;
z-index: 100;
/* box-shadow: $header-bar-shadow; */
padding-top: 15px;
}
.header-bar__container {
position: relative;
height: 100%;
margin-right: auto;
margin-left: auto;
max-width: 1152px;
}
.header-bar {
min-height: 3.5rem;
box-shadow: none;
}
.header-bar-mobile-drop-down {
display: inline;
}
.header-bar-mobile-drop-down__icon-button {
color: darkblue;
border: none;
background-color: transparent;
font-size: 1.5rem;
float: right;
line-height: 1.5rem;
cursor: pointer;
}
.header-bar-mobile-drop-down__item {
visibility: hidden;
border: 1px solid orange;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.header-bar-mobile-drop-down__icon-button:focus-within
.header-bar-mobile-drop-down__item {
visibility: visible;
opacity: 1;
margin-top: 41px;
height: 4.25rem;
background-color: palegreen;
display: inline-flex;
opacity: 1;
align-items: center;
text-align: center;
justify-content: center;
width: 100%;
}
.header-bar-utility {
height: 100%;
padding: 0 0.5rem;
display: flex;
align-items: center;
float: left;
color: pink;
background-color: transparent;
border: none;
font-size: 16px;
line-height: 1.5rem;
text-decoration: none;
cursor: pointer;
}
.header-bar-utility__icon {
display: inline;
font-size: 1.5rem;
}
.header-bar {
height: 3.5rem;
box-shadow: none;
}
.header-bar__toggle-menu {
height: 100%;
padding: 0 1rem 0 0.5rem;
display: flex;
align-items: center;
background-color: transparent;
color: black;
border: none;
font-size: 1.5rem;
min-width: 0;
cursor: pointer;
}
<!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="stylesheet" href="./test.css" />
<title>Dropdown</title>
</head>
<body>
<div class="header-bar">
<div class="header-bar__top">
<div class="header-bar__container">
<div class="header-bar-mobile-drop-down">
<button class="header-bar-mobile-drop-down__icon-button">
🎃 1
<div class="header-bar-mobile-drop-down__item">
<input placeholder="Search" />
</div>
</button>
</div>
</div>
</div>
</div>
<h1>Text overlayed</h1>
</body>
</html>
I have created a website for desktop and mobile, and it has to be responsive. My problem is that when I resize the browser all the content gets zoomed out instead of adapting. I also have an issue with the HTML. why is it only taking up 1/3 of the page according to dev tools and when I add width:1100px to my sections it renders the desktop version, but when I take it away it floats to the left side? Why is this happening?
Images of the problem:
Image 1
Image 2
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Source Sans Pro', sans-serif;
background-color: black;
color: white;
line-height: 30px;
}
html {
width:100%;
}
img {
width: 100%;
}
h1 {
font-weight: 700;
font-size: 44px;
margin-bottom: 40px;
line-height: 50px;
}
h3 {
width: 100%;
}
/* header */
header {
display: flex;
background-color: black;
height: 80px;
min-width: 1100px;
justify-content: right;
align-items: center;
margin-bottom: 50px;
border-bottom: 1px solid white;
}
nav ul li {
display: inline-block;
list-style-type: none;
margin-right: 20px;
}
.nav-links{
color: white;
font-size: 18px;
}
/* Banner */
.banner {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 500px;
width: 100%;
}
.banner-text-container {
max-width: 30%;
font-size: 22px;
}
span {
color: #11cc9e;
}
.consultation-link{
color: #11cc9e;
text-decoration: none;
margin-top: 30px;
font-weight: 900;
display: block;
border: 1px solid white;
max-width: 40%;
text-align: center;
padding: 5px;
}
.consultation-link:hover{
background-color: #fff;
}
/* About */
.about {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 600px;
min-width: 1100px;
}
.about-text-container {
max-width: 40%;
font-size: 22px;
margin-left: 20px;
}
.about-img{
width: 400px;
margin-right: 22px;
}
.about-title {
margin-bottom: 40px;
}
.about-us-link{
color: #11cc9e;
text-decoration: none;
margin-top: 30px;
font-weight: 900;
display: block;
border: 1px solid white;
text-align: center;
max-width: 25%;
padding: 5px;
}
.about-us-link:hover{
background-color: #fff;
}
/* Join */
.join {
min-height: 600px;
min-width: 1100px;
max-width: 100%;
}
.join-header{
width: 100%;
text-align: center;
margin-top: 150px;
font-size: 40px;
}
.container-boxes{
position: relative;
top: 0;
bottom: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
min-height: 500px;
min-width: 1100px;
}
.box {
position: relative;
overflow: hidden;
transition: 0.5s;
height: 200px;
width: 300px;
}
.box:hover{
z-index: 1;
transform: scale(1.25);
box-shadow: 0 25px 40px rgba(0, 0, 0, .5);
cursor: pointer;
}
.box .imgBX{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box .imgBX img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.box .imgBX:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: linear-gradient(180deg,rgba(0,0,0.7),#79dbc3);
mix-blend-mode: multiply;
opacity: 0;
transition: 0.5s;
}
.box:hover .imgBX:before {
opacity: 1;
}
.box .imgBX img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.content{
display: flex;
flex-direction: column;
text-align: center;
position: absolute;
top: 20%;
bottom: 40%;
width: 100%;
height: 100%;
z-index: 1;
padding: 20px;
visibility: hidden;
}
.box:hover .content{
visibility: visible;
}
/* Quote section */
.quote-section {
display: flex;
justify-content: center;
max-width: 100%;
min-height: 500px;
min-width: 1100px;
}
.quote-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-items: center;
max-width: 50%;
font-size: 22px;
text-align: center;
}
.quote {
line-height: 90px;
font-size: 150px;
font-style: italic;
color: #11cc9e;
text-indent: -37px;
font-weight: 600;
width: 37px;
}
.quote-img{
width: 90px;
margin: 40px auto;
}
.person-name{
color: #ccc;
}
.person-role{
font-size: 17px;
color: #ccc;
}
/* Footer */
footer {
text-align: center;
margin-top: 100px;
padding-top: 50px;
max-width: 100%;
min-height: 200px;
min-width: 1100px;
border-top: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Codes</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<ink rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#400;600&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./Resources/styles.css">
</head>
<body>
<header>
<!-- insert logo -->
<nav class="nav-links">
<ul>
<li>About</li>
<li>Peer group</li>
<li>Review</li>
</ul>
</nav>
</header>
<section class="banner">
<div class="banner-text-container">
<h1>Build. Grow. <span class="color-Learn">Learn.</span></h1>
<p>Unlock your potential with your peers!, using Blockchain, Fintech or the IT outsourcing company Boosty Labs helps you create an innovative end to end product or augment your team with the right experts.</p>
<a class="consultation-link" href="#">Free consultation </a>
</div>
<div class="banner-img">
<img src="./Resources/Images/banner.png" alt="">
</div>
</section>
<section class="about">
<div class="about-text-container">
<h2 class="about-title">Who we are</h2>
<p>Here you can find our ,collection of coding, data science and statistics tutorials with examples in R, Python, JavaScript and Python. As you click through, you'll notice that some tutorials have ribbons on their logos - they are part of our free and self-paced online course Data Science for Ecologists and Environmental Scientists! Yellow for the Stats from Scratch stream, blue for Wiz of Data Viz and purple for Mastering Modelling.</p>
<a class="about-us-link" href="#">More about us </a>
</div>
<div class="about-img">
<img src="./Resources/Images/whoweare.png" alt="">
</div>
</section>
<section class="join">
<h3 class="join-header" >Join a peer group!</h3>
<div class="container-boxes">
<div class="box">
<div class="imgBX">
<img src="./Resources/Images/box-1.png" alt="">
</div>
<div class="content">
<h3>AI</h3>
<P>Discover The Complete Range Of Artificial Intelligence Solutions.</P>
</div>
</div>
<div class="box">
<div class="imgBX">
<img src="./Resources/Images/box-2.png" alt="">
</div>
<div class="content">
<h3 class="frontend-title">Frontend Dev</h3>
<p>Discover The Complete Range Of Frontend Solutions.</p>
</div>
</div>
<div class="box">
<div class="imgBX">
<img src="./Resources/Images/box-3.png" alt="">
</div>
<div class="content">
<h3>Microsoft systems</h3>
<p>Discover The Complete Range Of Microsoft Solutions.</p>
</div>
</div>
</div>
</section>
<section class="quote-section">
<div class="quote-container">
<div class="quote">"</div>
<p class="p-quote">In coded, the progress of the topics and the exercises are really good. It's so nice to practice on good story told tasks. Also if you are stuck, it is nice to have a broad range of coders around in the peer groups that you can get the answers you are looking for.</p>
<div class="quote-img">
<img src="./Resources/Images/person-img.png" alt="">
</div>
<div class="person-name">Peter Gangland </div>
<div class="person-role">Director of business dev at <span>Microsoft</span></div>
</div>
</section>
<footer>
<div id="contact">
<h2>
Contact us</h5>
<h5>coded#peers.com</h5>
<h5>831-867-5309</h5>
</div>
<div id="copyright">
<h5>#copyright coded Enterprises 2022</h5>
</div>
</footer>
</body>
</html>
Some issues I noticed:
The horizontal scrollbar opens when the screen width is reduced after the web page is loaded; This situation is not suitable for responsive design. To avoid this situation, add overflow-x: hidden to the <body> I used the style.
You should use media queries to make a mobile responsive website. In this example I've edited the <img> element to remove it when the page shrinks.
I completely removed the width: 1100px style you added to the elements. You don't need to use this type to give width to the element.
On mobile-responsive websites, <img> elements are displayed on the new line at 100% width; you can implement this idea by using media queries at this stage.
You can visit this link for media query blocks according to the display size of the devices in CSS.
For example, the styles in #media only screen and (max-width: 880px){} are applied when the page size drops below 880px:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Source Sans Pro', sans-serif;
background-color: black;
color: white;
line-height: 30px;
width:100%;
overflow-x: hidden;
}
img {
width: 100%;
}
h1 {
font-weight: 700;
font-size: 44px;
margin-bottom: 40px;
line-height: 50px;
}
h3 {
width: 100%;
}
header {
display: flex;
background-color: black;
height: 80px;
justify-content: right;
align-items: center;
margin-bottom: 50px;
border-bottom: 1px solid white;
}
nav ul li {
display: inline-block;
list-style-type: none;
margin-right: 20px;
}
.nav-links{
color: white;
font-size: 18px;
}
.banner {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 500px;
width: 100%;
}
.banner-text-container {
max-width: 30%;
font-size: 22px;
}
span {
color: #11cc9e;
}
.consultation-link{
color: #11cc9e;
text-decoration: none;
margin-top: 30px;
font-weight: 900;
display: block;
border: 1px solid white;
max-width: 40%;
text-align: center;
padding: 5px;
}
.consultation-link:hover{
background-color: #fff;
}
.about {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 600px;
}
.about-text-container {
max-width: 40%;
font-size: 22px;
margin-left: 20px;
}
.about-img{
width: 400px;
margin-right: 22px;
}
.about-title {
margin-bottom: 40px;
width: 100% !important;
}
.about-us-link{
color: #11cc9e;
text-decoration: none;
margin-top: 30px;
font-weight: 900;
display: block;
border: 1px solid white;
text-align: center;
max-width: 25%;
padding: 5px;
}
.about-us-link:hover{
background-color: #fff;
}
.join {
/* */
}
.join-header{
width: 100%;
text-align: center;
margin-top: 75px;
font-size: 40px;
}
.container-boxes{
position: relative;
top: 0;
bottom: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
min-height: 500px;
}
.box {
position: relative;
overflow: hidden;
transition: 0.5s;
height: 200px;
width: 300px;
}
.box:hover{
z-index: 1;
transform: scale(1.25);
box-shadow: 0 25px 40px rgba(0, 0, 0, .5);
cursor: pointer;
}
.box .imgBX{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box .imgBX img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.box .imgBX:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: linear-gradient(180deg,rgba(0,0,0.7),#79dbc3);
mix-blend-mode: multiply;
opacity: 0;
transition: 0.5s;
}
.box:hover .imgBX:before {
opacity: 1;
}
.box .imgBX img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.content{
display: flex;
flex-direction: column;
text-align: center;
position: absolute;
top: 20%;
bottom: 40%;
width: 100%;
height: 100%;
z-index: 1;
padding: 20px;
visibility: hidden;
}
.box:hover .content{
visibility: visible;
}
/* Quote section */
.quote-section {
display: flex;
justify-content: center;
max-width: 100%;
min-height: 500px;
}
.quote-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-items: center;
max-width: 50%;
font-size: 22px;
text-align: center;
}
.quote {
line-height: 90px;
font-size: 150px;
font-style: italic;
color: #11cc9e;
text-indent: -37px;
font-weight: 600;
width: 37px;
}
.quote-img{
width: 90px;
margin: 40px auto;
}
.person-name{
color: #ccc;
}
.person-role{
font-size: 17px;
color: #ccc;
}
footer {
text-align: center;
margin-top: 100px;
padding-top: 50px;
max-width: 100%;
min-height: 200px;
border-top: 1px solid #fff;
}
#media only screen and (max-width: 1279px) {
nav ul li {
display: inline-block;
list-style-type: none;
margin-right: 20px;
color: #11cc9e;
}
}
#media only screen and (max-width: 880px){
html{
margin-left: 25px !important;
margin-right: 25px !important;
}
.banner-text-container {
max-width: 100%;
font-size: 20px;
}
img{
display: none;
}
.about-text-container {
max-width: 100% !important;
font-size: 22px;
}
.about-text-container {
margin-left: 0px;
}
.about {
display: inline;
}
.banner {
display: inline;
justify-content: space-around;
width: 100%;
}
.consultation-link{
color: #11cc9e;
text-decoration: none;
margin-bottom: 50px;
font-weight: 900;
display: block;
border: 1px solid white;
max-width: 100%;
text-align: center;
padding: 5px;
}
.about-us-link {
color: #11cc9e;
text-decoration: none;
margin-top: 30px;
font-weight: 900;
display: block;
border: 1px solid white;
text-align: center;
max-width: 100%;
padding: 5px;
}
.join{
display: none;
}
.join-header{
display: none;
}
.quote-section{
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Codes</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<ink rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#400;600&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<!-- insert logo -->
<nav class="nav-links">
<ul>
<li>About</li>
<li>Peer group</li>
<li>Review</li>
</ul>
</nav>
</header>
<section class="banner">
<div class="banner-text-container">
<h1>Build. Grow. <span class="color-Learn">Learn.</span></h1>
<p>Unlock your potential with your peers!, using Blockchain, Fintech or the IT outsourcing company Boosty Labs helps you create an innovative end to end product or augment your team with the right experts.</p>
<a class="consultation-link" href="#">Free consultation </a>
</div>
<div class="banner-img">
<img src="https://via.placeholder.com/400" alt="">
</div>
</section>
<section class="about">
<div class="about-text-container">
<h2 class="about-title">Who we are</h2>
<p>Here you can find our ,collection of coding, data science and statistics tutorials with examples in R, Python, JavaScript and Python. As you click through, you'll notice that some tutorials have ribbons on their logos - they are part of our free and self-paced online course Data Science for Ecologists and Environmental Scientists! Yellow for the Stats from Scratch stream, blue for Wiz of Data Viz and purple for Mastering Modelling.</p>
<a class="about-us-link" href="#">More about us </a>
</div>
<div class="about-img">
<img src="https://via.placeholder.com/400" alt="">
</div>
</section>
<section class="join">
<h3 class="join-header" >Join a peer group!</h3>
<div class="container-boxes">
<div class="box">
<div class="imgBX">
<img src="https://via.placeholder.com/400" alt="">
</div>
<div class="content">
<h3>AI</h3>
<P>Discover The Complete Range Of Artificial Intelligence Solutions.</P>
</div>
</div>
<div class="box">
<div class="imgBX">
<img src="https://via.placeholder.com/400" alt="">
</div>
<div class="content">
<h3 class="frontend-title">Frontend Dev</h3>
<p>Discover The Complete Range Of Frontend Solutions.</p>
</div>
</div>
<div class="box">
<div class="imgBX">
<img src="https://via.placeholder.com/400" alt="">
</div>
<div class="content">
<h3>Microsoft systems</h3>
<p>Discover The Complete Range Of Microsoft Solutions.</p>
</div>
</div>
</div>
</section>
<section class="quote-section">
<div class="quote-container">
<div class="quote">"</div>
<p class="p-quote">In coded, the progress of the topics and the exercises are really good. It's so nice to practice on good story told tasks. Also if you are stuck, it is nice to have a broad range of coders around in the peer groups that you can get the answers you are looking for.</p>
<div class="quote-img">
<img src="https://via.placeholder.com/400" alt="">
</div>
<div class="person-name">Peter Gangland </div>
<div class="person-role">Director of business dev at <span>Microsoft</span></div>
</div>
</section>
<footer>
<div id="contact">
<h2>
Contact us</h5>
<h5>coded#peers.com</h5>
<h5>831-867-5309</h5>
</div>
<div id="copyright">
<h5>#copyright coded Enterprises 2022</h5>
</div>
</footer>
</body>
</html>
For making your website responsive you need to use media queries. It's like you tell the browser how to style your website in different sizes. I think your problem with your sections might also get solved if you try to make your website responsive.
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>
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>