when i hover over the hamburger icon in 1000px mode the menu appears, but when i hover over menu it disappears. i have tried z-index and tricks related to position but cannot get the solution.
the issue is in 1000px because in full screen mode i can hover over sub-menu, but not on 1000px screen.
please help, thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESPN</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./app.css">
</head>
<body>
<header class="header">
<div class="header__logo"><span>ESPN</span> / Media Distribution</div>
<div class="hamburger__icon__section">
</div>
<nav class="navbar">
<div class="navbar__items">
<div class="hamburger__icon"><div></div><div></div><div></div></div>
<ul class="navbar__lists__items">
<li class="navbar__hover__items">
Sports Programming
<ul class="navbar__lists__items__item">
<li>Boxing</li>
<li>Films</li>
<li>Fina</li>
<li>World Athletics</li>
<li>Ncaa</li>
<li>Pocker</li>
<li>Special Olympics</li>
<li>X Games</li>
</ul>
</li>
<li class="navbar__hover__items">Content Calender</li>
<li class="navbar__hover__items">
Contacts
<ul class="navbar__lists__items__item">
<li>Asia Pacific</li>
<li>Canada</li>
<li>Europe, Middle East and Africa</li>
<li>Latin America</li>
<li>Mexico</li>
</ul>
</li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fa fa-search"></i>
</input>
</div>
</div>
</nav>
</header>
<div class="video__section">
<div class="video__header__wrapper">
<video src="./6. Exercise Higher Order Functions.mp4" loop="true" autoplay="true" muted>
</video>
</div>
<div class="video__section__content">
<p><span>ESPN /</span> Media Distribution</p>
</div>
</div>
<div class="image__section">
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
</div>
<div class="copyright__section">
<div class="copyright__section__content">
<p>Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy</p>
</div>
</div>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght#600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
font-family: 'Fira Sans', sans-serif;
line-height: 1.6rem;
}
body {
font-size: 1.6rem;
}
.header {
display: flex;
justify-content: space-around;
align-items: stretch;
background-color:rgb(202, 8, 19);
color: #fff;
border-bottom: 1px solid #fff;
}
.header__logo {
font-size: 20px;
line-height: 50px;
user-select: none;
}
.header__logo span {
font-style: oblique;
}
.navbar__items {
display: flex;
justify-content: center;
align-items: stretch;
}
.navbar__lists__items {
display: flex;
justify-content: center;
align-items: stretch;
list-style: none;
}
.navbar__lists__items > li {
margin: 0 5px;
}
.navbar__lists__items__item {
width: 250px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 59px;
left: 0px;
right: 0;
list-style: none;
transition: all 0.3s;
}
.navbar__lists__items__item li {
cursor: pointer;
border: 1px solid #666;
background-color: #fff;
line-height: 1.6rem;
}
.navbar__lists__items__item li a:hover {
background-color: #666666;
color: #fff;
}
.navbar__lists__items__item li a {
padding: 10px 20px;
display: block;
text-decoration: none;
color: #666666;
text-transform: uppercase;
}
.navbar__hover__items {
display: flex;
justify-content: center;
align-items: stretch;
position: relative;
line-height: 50px;
z-index: 1;
}
.navbar__hover__items > a {
margin-right: 5px;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: ' \02C5';
}
.navbar__lists__items > li > a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
.navbar__hover__items:nth-child(2n+1):hover > a {
background-color: #fff;
color: rgb(202, 8, 19);
}
.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item {
opacity: 1;
pointer-events: all;
transform: translateY(-10px);
}
.search {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.search input {
border: 1px solid #fff;
outline: none;
border-radius: 5px;
padding: 5px;
}
.search i {
position: absolute;
color: #000;
top: 50%;
left: 95%;
transform: translate(-95%, -50%);
margin-right: -30px;
}
.video__section {
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 40px;
}
.video__header__wrapper {
width: 100%;
height: 100%;
}
.video__header__wrapper video {
width: 100%;
height: 100%;
}
.video__section__content {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
user-select: none;
}
.video__section__content span {
font-style: oblique;
}
.image__section {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.image__section .image {
flex-basis: 25%;
overflow: hidden;
position: relative;
height: 200px;
width: 150px;
}
.image__section .image img {
width: 100%;
height: 100%;
cursor: pointer;
transform: scale(1.1);
transition: all 0.3s;
}
.overlay {
position: absolute;
right: 0;
left: 0;
bottom: 100%;
background-color: #000;
width: 100%;
overflow: hidden;
opacity: 0.7;
transition: 0.3s ease;
}
.image:hover img {
transform: scale(1);
}
.image:hover > .overlay {
height: 100%;
bottom: 0;
}
.copyright__section {
font-size: 10px;
background-color: rgb(202, 8, 19);
color: #fff;
}
.copyright__section__content {
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
}
#media (max-width: 1000px) {
.header {
padding: 0 10px;
}
.navbar__items {
position: relative;
}
.navbar__lists__items {
display: none;
position: absolute;
top: 50px;
right: 50px;
width: 300px;
padding: 0 10px;
background-color: #fff;
font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
z-index: 1;
box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
}
.navbar__lists__items > li > a {
color: #000;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: "";
display: block;
}
.navbar__hover__items {
display: block;
color: #000;
}
.navbar__lists__items__item {
display: none;
}
.video__section {
font-size: 35px;
}
.search {
height: 50px;
}
.hamburger__icon__section {
display: flex;
justify-content: flex-end;
flex: 2;
}
.hamburger__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
margin-right: 10px;
cursor: pointer;
}
.hamburger__icon > div {
width: 25px;
height: 2px;
margin: 3px 0;
background-color: #fff;
}
.hamburger__icon:hover + .navbar__lists__items {
display: block;
}
}
You could handle the show/hide using javascript instead of css because the way you do it right now whenever the browser detects your cursor is no longer on top of the hamburger_buttton it will hide your menu so it would be better to handle the event with a click instead. Or you can check this answer. Hope it helps.
let navbarListItems = document.querySelector('.navbar__lists__items');
let hamburgetButton = document.querySelector('.hamburger__icon');
hamburgetButton.onclick = function () {
navbarListItems.style.display = navbarListItems.style.display === 'none' ? 'block' : 'none';
}
#import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght#600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
font-family: 'Fira Sans', sans-serif;
line-height: 1.6rem;
}
body {
font-size: 1.6rem;
}
.header {
display: flex;
justify-content: space-around;
align-items: stretch;
background-color: rgb(202, 8, 19);
color: #fff;
border-bottom: 1px solid #fff;
}
.header__logo {
font-size: 20px;
line-height: 50px;
user-select: none;
}
.header__logo span {
font-style: oblique;
}
.navbar__items {
display: flex;
justify-content: center;
align-items: stretch;
}
.navbar__lists__items {
display: flex;
justify-content: center;
align-items: stretch;
list-style: none;
}
.navbar__lists__items>li {
margin: 0 5px;
}
.navbar__lists__items__item {
width: 250px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 59px;
left: 0px;
right: 0;
list-style: none;
transition: all 0.3s;
}
.navbar__lists__items__item li {
cursor: pointer;
border: 1px solid #666;
background-color: #fff;
line-height: 1.6rem;
}
.navbar__lists__items__item li a:hover {
background-color: #666666;
color: #fff;
}
.navbar__lists__items__item li a {
padding: 10px 20px;
display: block;
text-decoration: none;
color: #666666;
text-transform: uppercase;
}
.navbar__hover__items {
display: flex;
justify-content: center;
align-items: stretch;
position: relative;
line-height: 50px;
z-index: 1;
}
.navbar__hover__items>a {
margin-right: 5px;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: ' \02C5';
}
.navbar__lists__items>li>a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
.navbar__hover__items:nth-child(2n+1):hover>a {
background-color: #fff;
color: rgb(202, 8, 19);
}
.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item {
opacity: 1;
pointer-events: all;
transform: translateY(-10px);
}
.search {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.search input {
border: 1px solid #fff;
outline: none;
border-radius: 5px;
padding: 5px;
}
.search i {
position: absolute;
color: #000;
top: 50%;
left: 95%;
transform: translate(-95%, -50%);
margin-right: -30px;
}
.video__section {
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 40px;
}
.video__header__wrapper {
width: 100%;
height: 100%;
}
.video__header__wrapper video {
width: 100%;
height: 100%;
}
.video__section__content {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
user-select: none;
}
.video__section__content span {
font-style: oblique;
}
.image__section {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.image__section .image {
flex-basis: 25%;
overflow: hidden;
position: relative;
height: 200px;
width: 150px;
}
.image__section .image img {
width: 100%;
height: 100%;
cursor: pointer;
transform: scale(1.1);
transition: all 0.3s;
}
.overlay {
position: absolute;
right: 0;
left: 0;
bottom: 100%;
background-color: #000;
width: 100%;
overflow: hidden;
opacity: 0.7;
transition: 0.3s ease;
}
.image:hover img {
transform: scale(1);
}
.image:hover>.overlay {
height: 100%;
bottom: 0;
}
.copyright__section {
font-size: 10px;
background-color: rgb(202, 8, 19);
color: #fff;
}
.copyright__section__content {
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
}
#media (max-width: 1000px) {
.header {
padding: 0 10px;
}
.navbar__items {
position: relative;
}
.navbar__lists__items {
display: none;
position: absolute;
top: 50px;
right: 50px;
width: 300px;
padding: 0 10px;
background-color: #fff;
font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;
z-index: 1;
box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
}
.navbar__lists__items>li>a {
color: #000;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: "";
display: block;
}
.navbar__hover__items {
display: block;
color: #000;
}
.navbar__lists__items__item {
display: none;
}
.video__section {
font-size: 35px;
}
.search {
height: 50px;
}
.hamburger__icon__section {
display: flex;
justify-content: flex-end;
flex: 2;
}
.hamburger__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
margin-right: 10px;
cursor: pointer;
}
.hamburger__icon>div {
width: 25px;
height: 2px;
margin: 3px 0;
background-color: #fff;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESPN</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./app.css">
</head>
<body>
<header class="header">
<div class="header__logo"><span>ESPN</span> / Media Distribution</div>
<div class="hamburger__icon__section">
</div>
<nav class="navbar">
<div class="navbar__items">
<div class="hamburger__icon">
<div></div>
<div></div>
<div></div>
</div>
<ul class="navbar__lists__items">
<li class="navbar__hover__items">
Sports Programming
<ul class="navbar__lists__items__item">
<li>Boxing</li>
<li>Films</li>
<li>Fina</li>
<li>World Athletics</li>
<li>Ncaa</li>
<li>Pocker</li>
<li>Special Olympics</li>
<li>X Games</li>
</ul>
</li>
<li class="navbar__hover__items">Content Calender</li>
<li class="navbar__hover__items">
Contacts
<ul class="navbar__lists__items__item">
<li>Asia Pacific</li>
<li>Canada</li>
<li>Europe, Middle East and Africa</li>
<li>Latin America</li>
<li>Mexico</li>
</ul>
</li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fa fa-search"></i>
</input>
</div>
</div>
</nav>
</header>
<div class="video__section">
<div class="video__header__wrapper">
<video src="./6. Exercise Higher Order Functions.mp4" loop="true" autoplay="true" muted>
</video>
</div>
<div class="video__section__content">
<p><span>ESPN /</span> Media Distribution</p>
</div>
</div>
<div class="image__section">
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
</div>
<div class="copyright__section">
<div class="copyright__section__content">
<p>Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy</p>
</div>
</div>
</body>
</html>
Simply add this to your selector :
, .navbar__lists__items:hover
The full rule should look like this :
.hamburger__icon:hover + .navbar__lists__items, .navbar__lists__items:hover {
display: block;
}
This is happening since the scope of hover effect is only limited to the hamburger icon and as soon as the hover scope is left, the css does not execute for it so in order to stabilize the menu items I have added hover scope to that <ul> too.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
font-family: 'Fira Sans', sans-serif;
line-height: 1.6rem;
}
body {
font-size: 1.6rem;
}
.header {
display: flex;
justify-content: space-around;
align-items: stretch;
background-color:rgb(202, 8, 19);
color: #fff;
border-bottom: 1px solid #fff;
}
.header__logo {
font-size: 20px;
line-height: 50px;
user-select: none;
}
.header__logo span {
font-style: oblique;
}
.navbar__items {
display: flex;
justify-content: center;
align-items: stretch;
}
.navbar__lists__items {
display: flex;
justify-content: center;
align-items: stretch;
list-style: none;
}
.navbar__lists__items > li {
margin: 0 5px;
}
.navbar__lists__items__item {
width: 250px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 59px;
left: 0px;
right: 0;
list-style: none;
transition: all 0.3s;
}
.navbar__lists__items__item li {
cursor: pointer;
border: 1px solid #666;
background-color: #fff;
line-height: 1.6rem;
}
.navbar__lists__items__item li a:hover {
background-color: #666666;
color: #fff;
}
.navbar__lists__items__item li a {
padding: 10px 20px;
display: block;
text-decoration: none;
color: #666666;
text-transform: uppercase;
}
.navbar__hover__items {
display: flex;
justify-content: center;
align-items: stretch;
position: relative;
line-height: 50px;
z-index: 1;
}
.navbar__hover__items > a {
margin-right: 5px;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: ' \02C5';
}
.navbar__lists__items > li > a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
.navbar__hover__items:nth-child(2n+1):hover > a {
background-color: #fff;
color: rgb(202, 8, 19);
}
.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item {
opacity: 1;
pointer-events: all;
transform: translateY(-10px);
}
.search {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.search input {
border: 1px solid #fff;
outline: none;
border-radius: 5px;
padding: 5px;
}
.search i {
position: absolute;
color: #000;
top: 50%;
left: 95%;
transform: translate(-95%, -50%);
margin-right: -30px;
}
.video__section {
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 40px;
}
.video__header__wrapper {
width: 100%;
height: 100%;
}
.video__header__wrapper video {
width: 100%;
height: 100%;
}
.video__section__content {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
user-select: none;
}
.video__section__content span {
font-style: oblique;
}
.image__section {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.image__section .image {
flex-basis: 25%;
overflow: hidden;
position: relative;
height: 200px;
width: 150px;
}
.image__section .image img {
width: 100%;
height: 100%;
cursor: pointer;
transform: scale(1.1);
transition: all 0.3s;
}
.overlay {
position: absolute;
right: 0;
left: 0;
bottom: 100%;
background-color: #000;
width: 100%;
overflow: hidden;
opacity: 0.7;
transition: 0.3s ease;
}
.image:hover img {
transform: scale(1);
}
.image:hover > .overlay {
height: 100%;
bottom: 0;
}
.copyright__section {
font-size: 10px;
background-color: rgb(202, 8, 19);
color: #fff;
}
.copyright__section__content {
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
}
#media (max-width: 1000px) {
.header {
padding: 0 10px;
}
.navbar__items {
position: relative;
}
.navbar__lists__items {
display: none;
position: absolute;
top: 50px;
right: 50px;
width: 300px;
padding: 0 10px;
background-color: #fff;
font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
z-index: 1;
box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
}
.navbar__lists__items > li > a {
color: #000;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: "";
display: block;
}
.navbar__hover__items {
display: block;
color: #000;
}
.navbar__lists__items__item {
display: none;
}
.video__section {
font-size: 35px;
}
.search {
height: 50px;
}
.hamburger__icon__section {
display: flex;
justify-content: flex-end;
flex: 2;
}
.hamburger__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
margin-right: 10px;
cursor: pointer;
}
.hamburger__icon > div {
width: 25px;
height: 2px;
margin: 3px 0;
background-color: #fff;
}
/* added another line here */
.hamburger__icon:hover + .navbar__lists__items,
.hamburger__icon + .navbar__lists__items:hover{
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESPN</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./app.css">
</head>
<body>
<header class="header">
<div class="header__logo"><span>ESPN</span> / Media Distribution</div>
<div class="hamburger__icon__section">
</div>
<nav class="navbar">
<div class="navbar__items">
<div class="hamburger__icon"><div></div><div></div><div></div></div>
<ul class="navbar__lists__items">
<li class="navbar__hover__items">
Sports Programming
<ul class="navbar__lists__items__item">
<li>Boxing</li>
<li>Films</li>
<li>Fina</li>
<li>World Athletics</li>
<li>Ncaa</li>
<li>Pocker</li>
<li>Special Olympics</li>
<li>X Games</li>
</ul>
</li>
<li class="navbar__hover__items">Content Calender</li>
<li class="navbar__hover__items">
Contacts
<ul class="navbar__lists__items__item">
<li>Asia Pacific</li>
<li>Canada</li>
<li>Europe, Middle East and Africa</li>
<li>Latin America</li>
<li>Mexico</li>
</ul>
</li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fa fa-search"></i>
</input>
</div>
</div>
</nav>
</header>
<div class="video__section">
<div class="video__header__wrapper">
<video src="./6. Exercise Higher Order Functions.mp4" loop="true" autoplay="true" muted>
</video>
</div>
<div class="video__section__content">
<p><span>ESPN /</span> Media Distribution</p>
</div>
</div>
<div class="image__section">
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
</div>
<div class="copyright__section">
<div class="copyright__section__content">
<p>Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy</p>
</div>
</div>
</body>
</html>
Related
I have two big problems:
The first trouble I have encountered is that when I am testing the responsivity of my website in the contact section I always meet a reappearing problem: There is a white space (.2 rem - 1.2rem width) on the right side of the body when I try to display the whole page under 400px width device.
My second problem is that I have social media icons in the footer. They appear properly in all other sections (multipage website), but only here does something prevent them to be displayed properly. I tried resizing their main divs to 100% width and 100% max-width, but an element is probably still longer than the others, which should obviously cause this kind of problem.
So about the white blank area, I think it is important to know that I have a specially styled scrollbar, which might also cause this little mischief. I am unsure, so I have also tried removing it, but it did not help. In the beginning, I also encountered the same problem with the footer, but somehow I managed to get by and was able to solve it by correcting the width of the .footer-container. Since then the white space appeared and my second problem with social media icons not being displayed properly just arose.
Here is my code:
HTML:
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="contacts.css">
<title>Eckert Művek Galéria</title>
</head>
<body>
<div class="floating-btn show-btn" aria-label="up button" role="button">
<img src="assets/svg_files/chevron-up-solid.svg" alt="up img" />
</div>
<header>
<!--NAVBAR-->
<nav>
<ul class="menu" id="desktop-menu">
<li class="nav-item">Főoldal</li>
<li class="nav-item">Rólunk</li>
<li class="nav-item">Szolgáltatások</li>
<li class="nav-item">Miért mi?</li>
<li class="nav-item">Galéria</li>
<li class="nav-item">Kapcsolat</li>
</ul>
<!--HAMBURGER ICON-->
<div class="header-right-gap">
<button class="hamburger" aria-label="hamburger button">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</button>
</div>
</nav>
<!--MOBILE MENU-->
<div class="mobile-menu">
<ul class="m-menu">
<li class="nav-item">Főoldal</li>
<li class="nav-item">Rólunk</li>
<li class="nav-item">Szolgáltatások</li>
<li class="nav-item">Miért mi?</li>
<li class="nav-item">Galéria</li>
<li class="nav-item">Kapcsolat</li>
</ul>
</div>
</header>
<main>
<!--CONTACT FORM-->
<div class="container">
<form>
<h1>Kapcsolat</h1>
<input type="text" id="firstName" placeholder="Családnév" required>
<input type="text" id="lastName" placeholder="Keresztnév" required>
<input type="email" id="email" placeholder="Email" required>
<input type="text" id="mobile" placeholder="Telefonszám" required>
<h4 class="contactus">Lépjen velünk kapcsolatba!</h4>
<textarea id="texti" required></textarea>
<input type="submit" value="Elküldés" id="button">
</form>
</div>
</main>
<footer>
<div class="footer-container">
<!--COMPANY INFORMATION, CONTATCTS-->
<div class="footer-top">
<div>
<article>
<h2>Elérhetőségeink</h2>
<div class="cellphone">
<img src="assets/png/telephone.png" alt="phone-icon">
<h3><span>Telefonszám:</span> +36709424298</h3>
</div>
<div class="internet">
<img src="assets/png/mail.png" alt="email-icon">
<h3><span>E-mail:</span> eckertmuvek#gmail.com</h3>
</div>
<div class="headquarter">
<img src="assets/png/location.png" alt="company-icon">
<h3><span>Telephely:</span> Budapest, 1182 Török Bálint u. 16/b</h3>
</div>
<div class="opening-hours">
<img src="assets/png/clock.png" alt="op-icon">
<h3><span>Nyitvatartási idő:</span> hétfő - péntek(7:00 - 17:30)</h3>
</div>
</article>
</div>
<!--TEXT-->
<div class="text-container">
<h4>Céginformációk</h4>
<p>
<ol>
<li>
<h5>Cégjegyzékszám: </h5>
<p> 01 09 996342</p>
</li>
<li>
<h5>Adószám: </h5>
<p>24222716243</p>
</li>
<li>
<h5>Számlaszám: </h5>
<p>112131423-43242142-432412421</p>
</li>
<li>
<h5>Cégnév: </h5>
<p>Eckert Művek Korlátolt Felelősségű Társaság</p>
</li>
</ol>
</p>
</div>
<!--
<div class="text-container">
<h4>Ttitle-1</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dicta modi laborum quibusdam quis natus debitis qui dolor
voluptatibus ab sit, cum saepe enim unde doloribus veniam
numquam perspiciatis optio impedit.</p>
</div>
-->
<!--POLICIES-->
<div class="policies">
Impresszum
GDPR Tájékoztató
Süti Tájékoztató
</div>
</div>
<!--MAP-->
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2699.366130757782!2d19.217992451587673!3d47.42430370844346!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4741c1f21fa88e89%3A0x44673b68b84b51c9!2zQnVkYXBlc3QsIFTDtnLDtmsgQsOhbGludCB1LiAxNmIsIDExODI!5e0!3m2!1shu!2shu!4v1672662477180!5m2!1shu!2shu"
height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<!--SOCIAL MEDIA ICONS-->
<div class="social-media-icons">
<div class="sm-container" id="insta">
<div class="sm-icon">
</div>
</div>
<div class="sm-container" id="github">
<div class="sm-icon">
</div>
</div>
<div class="sm-container" id="facebook">
<div class="sm-icon">
</div>
</div>
<div class="sm-container" id="linkedin">
<div class="sm-icon">
</div>
</div>
</div>
<div class="footer-bottom">
<p>© Eckert Művek Kft. Minden jog fenntartva.</p>
</div>
</div>
</footer>
<script src="contacts.js"></script>
</body>
</html>
And here is my CSS code:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500;600;700;800;900&display=swap');
:root {
--nav-height: 100px; /*80%*/
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 100vh;
width: 100%;
font-size: 12px;
font-family: sans-serif;
}
.floating-btn {
position: fixed;
bottom: 3.5vh;
right: 0;
width: 50px;
height: 50px;
z-index: 100;
background-color: yellow;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 5px hsla(0, 0%, 0%, hsla(0,0%,0%,0.5));
cursor: pointer;
margin-right: 1rem;
border: 1px solid #000;
}
.show-btn {
display: block;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 100;
background-color: #000;
}
/*Srcollbar*/
::-webkit-scrollbar{
width: 15px;
background: #000;
}
::-webkit-scrollbar-thumb {
background: yellow;
border-radius: 10px;
border: 1px solid black;
}
::-webkit-scrollbar-thumb:active {
background: orangered;
}
nav {
display: flex;
width: min(90%, 1200px);
height: inherit;
align-items: center;
justify-content: flex-start;
margin-inline: unset;
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 20px;
left: 2.5rem;
gap: 1rem;
/*margin-top: -2.5rem;*/
}
nav a {
max-height: var(--nav-height);
align-items: center;
margin-inline: auto;
font-size: 20px;
position: relative;
height: 100%;
}
nav ul {
display: flex;
gap: 1rem;
width: 100%;
list-style: none;
margin-top: 3rem;
}
.nav-item a {
color: white;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
font-size: 20px;
height: 100%;
margin: .5em .8em;
padding: 10px;
}
.nav-item a::before,
.nav-item a::after {
content: '';
height: 14px;
width: 14px;
position: absolute;
transition: all .35s ease;
opacity: 0;
}
nav a::before {
content: '';
right: 0;
top: 0;
border-top: 3px solid #ffed4b;
border-right: 3px solid #fdcd3b;
transform: translate(-100%, 50%); /*-100%, 50%*/
}
.nav-item a:after {
content: '';
left: 0;
bottom: 0;
border-bottom: 3px solid #fdcd3b;
border-left: 3px solid #ffed4b;
transform: translate(100%, -50%); /*100%, -50%*/
}
.nav-item a:hover:before,
.nav-item a:hover:after{
transform: translate(0,0);
opacity: 1;
}
.nav-item a:hover {
text-decoration: underline;
color:yellow;
}
.container{
min-height: 100vh;
width: 99.vw;
background: #08071d;
display: flex;
justify-content: center;
align-items: center;
background: url("assets/images/mainpage/106811484-1608045351058-gettyimages-1126750618-dsc_1540.jpeg") no-repeat center center/cover;
}
.container form{
width: 670px; /*670px*/
height: 450px;
display: flex;
justify-content: center;
box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
border-radius: 15px;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
flex-wrap: wrap;
overflow-x: hidden;
}
.container form h1{
color: #fff;
font-weight: 500;
margin-top: 20px;
width: 500px;
text-align: center;
}
.container form input{
width: 290px;
height: 40px;
padding-left: 10px;
outline: none;
border: none;
font-size: 25px;
margin-bottom: 10px;
background: none;
border-bottom: 2px solid #fff;
}
.container form input::placeholder{
color: #ddd;
}
.container form #lastName,
.container form #mobile{
margin-left: 20px;
}
.container form h4{
color: #fff;
font-weight: 300;
width: 600px;
margin-top: 20px;
}
.container form textarea{
background: none;
border: none;
border-bottom: 2px solid #fff;
color: #fff;
font-weight: 200;
font-size: 25px;
padding: 10px;
outline: none;
min-width: 600px;
max-width: 600px;
min-height: 80px;
max-height: 80px;
}
.contactus {
font-size: 18px;
}
input[type="text"]:focus, input[type="email"]:focus, #texti:focus {
border-bottom: 3px solid #fdcd3b;
}
textarea::-webkit-scrollbar{
width: 1em;
}
textarea::-webkit-scrollbar-thumb{
background-color: rgba(194,194,194,0.713);
}
.container form #button{
border: 1px solid;
background: transparent;
border-radius: 50px;
margin-top: 20px;
font-weight: 600;
font-size: 20px;
color: #fff;
width: 100px;
padding: 0;
margin-right: 500px;
margin-bottom: 30px;
transition: 0.3s;
}
.container form #button:hover{
opacity: 0.9;
transform: scale(1.2);
background-color: black;
color: yellow;
}
/*FOOTER*/
footer {
width: 100%;
background-color: #000;
padding-block: 4rem;
color: white;
}
.footer-container {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-inline: auto;
width: min(90%, 1200px);
}
.footer-top {
width: 100%;
height: 100%;
color: #fff;
font-size: 10px;
display: flex;
justify-content: space-around;
}
.footer-top h2 {
text-align: center;
justify-content: center;
align-items: center;
}
.footer-top article div {
line-height: 2.5rem;
}
.footer-top article div:first-of-type {
margin-top: 1rem;
}
.footer-top img {
height: 64px;
}
.text-container p {
margin-top: 2rem;
}
.text-container ol li {
line-height: 1.5rem;
}
/*CONTACT ICONS*/
.cellphone img, .internet img, .headquarter img, .opening-hours img{
background-color: yellow;
border-radius: 50px;
transition: all 0.3s linear;
}
footer img:hover {
background-color: orangered;
border-radius: 40px;
transform: rotate(-360deg);
}
.footer-bottom {
text-align: center;
margin-top: 2rem;
}
span {
color: yellow;
}
.text-container {
justify-content: space-between;
width: 20vw;;
font-size: 0.8rem;
}
/*POLICIES LINKS*/
.policies {
display: flex;
flex-direction: column;
font-size: 14px;
text-transform: uppercase;
}
.policies a {
color: yellow;
font-size: 10px;
line-height: 2rem;
}
.policies a:hover {
color: orangered;
}
/*MAP*/
.map {
margin-inline: auto;
}
/*SOCIAL MEDIA ICONS*/
.social-media-icons {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.sm-container {
display: flex;
justify-content: center;
gap: 2rem;
padding:1rem;
border: 1px black;
width: 100%;
height: 100%;
}
.sm-container a:active {
color: yellow;
}
.fa {
border-radius: 50%;
width: 100%;
height: 100%;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 30px;
/**/
}
.fa-instagram {
background: #125688;
color: white;
padding: 1rem;
}
.fa-github {
background: white;
color: black;
padding: 1rem;
}
.fa-facebook {
background: #4267B2;
color: white;
padding: 1rem;
}
.fa-linkedin {
background: #3B5998;
color: white;
padding: 1rem;
}
.sm-icon {
transition: all 0.3s linear;
}
.sm-icon:hover {
transform: scale(1.2);
}
.fa:hover {
background-color: #fdcd3b;
}
/*MOBILE MENU*/
.mobile-menu {
display: none;
}
.mobile-menu {
display: flex;
width: 100%; /*.line a szülő tehát 40px a width*/
height: calc(100vh - 80px);
align-items: center;
justify-content: center;
position: absolute;
top: 80px;
left: 0;
background-color: black;
transform: translate(-100%);
transition: all 0.4s ease;
z-index: 100;
}
.mobile-menu-on {
display: flex; /**/
transform: translate(0);
}
.m-menu {
display: flex;
flex-direction: column;
gap: 2rem;
text-align: center;
font-size: 1.4rem;
}
/*hamburger icon*/
.header-right-gap {
width: 100px;
margin-left: 2rem;
}
.hamburger {
display: none;
position: fixed;
width: 50px;
height: 50px;
border: none;
background-color: transparent;
top: 0;
left: 1;
margin-top: 1.5rem;
}
.hamburger:hover {
border: 6px solid;
border-color: yellow;
width: 43px;
margin-left: 4px;
transform: scale(1.2);
}
.hamburger:hover .line.line-1 {
/*display: none;*/
transform: rotate(45deg) translateY(7.5px);
background-color: yellow;
}
.hamburger:hover .line.line-2 {
display: none;
}
.hamburger:hover .line.line-3 {
/*display: none;*/
transform: rotate(-45deg) translateY(-7.5px);
background-color: yellow;
}
.line {
transition: all .4s ease;
width: 40px;
height: 5px;
background-color: white;
margin-block: 5px;
border-radius: 10px;
}
/*Media query*/
#media (max-width: 1200px) {
.hamburger {
display: block;
}
#desktop-menu {
display: none;
}
}
#media (max-width: 900px) {
footer nav ul {
flex-direction: column;
}
footer nav ul li a {
font-size: 15px;
/*padding: 15px;*/
}
}
#media (max-width: 750px) {
.footer-container {
display: flex;
flex-wrap: wrap;
}
footer nav ul li a {
font-size: 10px;
padding: 15px;
}
.text-container p {
font-size: 10px;
}
}
#media (max-width: 600px) {
.container form {
width: 470px;
}
.container form input {
width: 160px;
}
.container form #button, .container form h4 {
margin-inline: auto;
}
.container form textarea {
min-width: 300px;
max-width: 300px;
}
}
#media (max-width: 400px) {
.container {
max-width: 100%;
height: 100%;
overflow: hidden;
}
.container form {
max-width: 100%;
padding-top: 40px;
padding-bottom: 10px;
}
.container form input, h4 {
text-align: center;
}
.container form input {
width: 160px;
}
.container form #button, .container form h4 {
margin-inline: auto;
}
.container form textarea {
align-items: center;
min-width: 300px;
max-width: 300px;
}
.text-container {
width: 70vw;
}
.container form #button {
display: flex;
flex-direction: column;
}
footer {
width: 400px;
}
.footer-top {
display: flex;
flex-direction: column;
align-items: center;
}
}
I once had a similar problem and it was due to margin of one element being bigger than it should be, and it just made that div bigger and pushed it out of viewport, so you could check your margins, I can see that you have quite a lot of margins, inline and to margin-right as well.
so I'm creating a website and it's so important for me to finish it in time but I hit a problem that creates an annoying bug in android that that makes the body not stretch to the end of the page
here's how to remake this bug:
run the code that I will put below
go to Devtools
turn on mobile mode
heres the code :
let slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
document.getElementById("buy-id").addEventListener("click", function() {
localStorage.clear()
localStorage.setItem("buy-item", "id");
window.location.href = window.location.href + "/buy-gem-list";
});
document.getElementById("buy-details").addEventListener("click", function() {
localStorage.clear()
localStorage.setItem("buy-item", "details");
window.location.href = window.location.href + "/buy-gem-list";
});
#font-face {
font-family: yekanbakh;
font-style: normal;
font-weight: 100;
src: url(fonts/yekan-bakh-regular.ttf) format("truetype")
}
* {
font-family: yekanbakh;
font-weight: 400;
box-sizing: border-box;
margin: 0;
}
body {
background-color: #e5e4f3;
width: 100%;
}
.navbar {
display: flex;
flex-direction: row;
position: sticky;
justify-content: center;
padding: 1em;
background-color: rgb(252, 244, 244);
box-shadow: 0 0 4px black;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.navbar>span {
font-size: 40px;
font-weight: 550;
}
.navbar>.logo {
display: inline-block;
width: 55px;
height: 55px;
background: url("./images/logo.png");
background-size: 56px;
border-radius: 500%;
margin-right: 10px;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
margin-top: 2em;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #161616;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #020202;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
.buy {
margin-top: 1em;
padding: 1em;
text-align: center;
}
.buy>span {
font-weight: bold;
font-size: 20px;
}
.buy>.items {
display: flex;
justify-content: center;
}
.buy>.items>.item {
width: 75px;
height: 75px;
margin: 0 3px;
background-color: rgb(204, 102, 102);
border-radius: 50%;
cursor: pointer;
background-image: url("images/gem.png");
background-repeat: no-repeat;
background-size: 75px;
}
.buy>.items>.item:hover {
background-color: rgb(223, 68, 68);
}
.social {
margin-top: 1em;
padding: 1em;
text-align: center;
}
.social>span {
font-weight: bold;
font-size: 20px;
}
.social>.items {
display: flex;
justify-content: center;
padding: 1em;
}
.social>.items>.item {
cursor: pointer;
display: flex;
flex-direction: row;
margin: 0 7px;
background-color: #ccc;
padding: 1em;
border-radius: 15px;
}
.social>.items>.item>a {
color: white;
text-decoration: none;
}
.social>.items>.item:hover {
background-color: rgb(126, 107, 107);
}
.whatsapp-link {
margin-top: 1em;
padding: 1em;
text-align: center;
}
.whatsapp-link>span {
font-weight: bold;
font-size: 20px;
}
.whatsapp-link>.items {
display: flex;
justify-content: center;
padding: 1em;
}
.whatsapp-link>.items>.item {
cursor: pointer;
display: flex;
flex-direction: row;
margin: 0 7px;
background-color: #ccc;
padding: 1em;
border-radius: 15px;
}
.whatsapp-link>.items>.item>a {
color: white;
text-decoration: none;
}
.whatsapp-link>.items>.item:hover {
background-color: rgb(126, 107, 107);
}
.footer {
margin-top: 3em;
text-align: right;
background-color: #fff;
padding: 55px;
}
.footer>.about {
padding: 15px;
}
.footer>.about>span {
font-weight: bold;
font-size: 17px;
}
.footer>.about>p {
margin-right: 1.5em;
}
.footer>.copyright {
font-weight: 900;
text-align: center;
color: rgb(225, 10, 10);
}
.itemss {
margin: 3em;
padding: 0.5em;
border: 3px solid #ccc;
border-radius: 15px;
direction: rtl;
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: #ccc;
}
.itemss>.item {
margin: 1.25em;
padding: 0.5em;
border: 3px solid #bbb;
background-color: #bbb;
border-radius: 10px;
}
.itemss>.item>.title {
font-weight: bold;
font-size: 20px;
}
.itemss>.item>.price {
font-weight: 600;
color: darkgreen;
}
.itemss>.item>.btn-buy {
padding: 0.5em;
border-radius: 5px;
background-color: rgb(243, 54, 54);
text-align: center;
cursor: pointer;
color: white;
}
.itemss>.item>.btn-buy>a {
text-decoration: none;
color: white;
}
.itemss>.item>.btn-buy:hover {
background-color: rgb(197, 59, 59);
}
.itemss>.item>.gem {
width: 100px;
height: 100px;
background-image: url("../images/gem.png");
background-repeat: no-repeat;
background-size: 100px;
}
.instagram {
width: 25px;
height: 25px;
background-size: 25px;
border-radius: 3px;
background-image: url("./images/instagram.png")
}
.telegram {
width: 25px;
height: 25px;
background-size: 25px;
border-radius: 50%;
background-image: url("./images/telegram.jpg")
}
<!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>Viva Shop - فروش جم فیری فایر بسیار ارزان</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="./script.js" defer></script>
<meta name="theme-color" content="#5f72da">
<meta name="description" content="شرکت اینترنتی ویوا شاپ جزو بزرگترین فروشگاه های فروش جم بازی کامپیوتری فیری فایر است که کلی محصول با قیمت ارزان دارند">
<link rel="shortcut icon" href="images/logo.png" type="image/x-icon">
</head>
<body>
<div class="navbar">
<div class="logo"></div>
<span>ویوا شاپ</span>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="images/notAvalibale.png" height="250" style="width:100%">
<div class="text">عکس دریافت نشد</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="images/notAvalibale.png" height="250" style="width:100%">
<div class="text">عکس دریافت نشد</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="images/notAvalibale.png" height="250" style="width:100%">
<div class="text">عکس دریافت نشد</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<!-- <center><img src="images/bannner.png"></center> -->
<div class="buy">
<span>خرید جم</span>
<div class="items">
<div class="item" id="buy-details">
با اطلاعات
</div>
<div class="item" id="buy-id">
با آیدی
</div>
</div>
</div>
<div class="social">
<span>لینک فضای مجازی</span>
<div class="items">
<div class="item">
<div class="telegram"></div>
تلگرام
</div>
<div class="item">
<div class="instagram"></div>
اینستاگرام
</div>
</div>
</div>
<div class="whatsapp-link">
<span>لینک چنل های واتساپ</span>
<div class="items">
<div class="item">
شعبه 1 واتساپ
</div>
<div class="item">
شعبه 2 واتساپ
</div>
<div class="item">
شعبه 3 واتساپ
</div>
<div class="item">
شعبه 4 واتساپ
</div>
<div class="item">
شعبه 5 واتساپ
</div>
</div>
</div>
<div class="footer">
<!-- <div class="support">
<p>برای تماس با شرکت ویوا شاپ متن پیغامتان را وارد کنید</p>
<div class="inputbox">
<input type="text" name="text-msg" id="support-msg-text">
<div class="submit" id="support-btn-submit">ثبت</div>
</div>
</div> -->
<div class="about">
<span>
درباره ویوا شاپ
</span>
<p>
ویوا شاپ یکی از بزرگ ترین فروشگاه های آیتم های قابل خرید بازی کامپیوتری فیری فایر است که تا کنون بیش از 100 مشتری داشته است و 6 شعبه در واتساپ دارد
</p>
</div>
<hr>
<div class="copyright">
© تمام حقوق این وبسایت متعلق به ویوا شاپ است و هرگونه کپی برداری پیگرد قانونی دارد
</div>
</div>
</body>
</html>
you will get a headache looking at the code
please help me i want to fix it fast
I would like to do a responsive stepper where in the lines in between steppers are connected to each step. Currently only workable with 4 steps, it becomes not responsive once it is more or less than 4 steps.
Here is the jsfiddle, currently workable with 4 steps.
.bullet.completed::after {
content: '';
position: absolute;
bottom: 10px;
height: 1px;
width: calc(133% - 21px);
background-color: #000;
margin-left: 7px;
}
I tried to change this part but it doesn't seem to work. Thanks for advance!
#stepProgressBar {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 90%;
margin: 0 auto;
margin-bottom: 40px;
}
.step {
text-align: center;
width: 20%;
position: relative;
}
.step-text {
margin-bottom: 10px;
color: #000;
}
.bullet {
border: 1px solid #000;
height: 20px;
width: 20px;
color: #000;
display: inline-block;
transition: background-color 500ms;
line-height: 20px;
}
.bullet.completed {
color: white;
background-color: #000;
}
.bullet.completed::after {
content: '';
position: absolute;
bottom: 10px;
height: 1px;
width: calc(133% - 21px);
background-color: #000;
margin-left: 7px;
}
/* Base styles and helper stuff */
.hidden {
display: none;
}
button {
padding: 5px 10px;
border: 1px solid black;
transition: 250ms background-color;
}
button:hover {
cursor: pointer;
background-color: black;
color: white;
}
button:disabled:hover {
opacity: 0.6;
cursor: not-allowed;
}
.text-center {
text-align: center;
}
.container {
max-width: 100%;
margin: 0 auto;
margin-top: 20px;
padding: 40px;
}
<div class="container">
<div id="stepProgressBar">
<div class="step">
<p class="step-text">Super Duper Long Title</p>
<div class="bullet completed">1</div>
</div>
<div class="step">
<p class="step-text">Long Long Title</p>
<div class="bullet completed">2</div>
</div>
<div class="step">
<p class="step-text">Loooong Title</p>
<div class="bullet completed">3</div>
</div>
<div class="step">
<p class="step-text">Loooong Title</p>
<div class="bullet">4</div>
</div>
</div>
</div>
Modify your .bullet.completed::after to display:flex, and set its width to 100% minus a modified margin-left value, which is equal to the width of the .bullet (20px):
.bullet.completed::after {
content: '';
position: absolute;
bottom: 10px;
height: 1px;
display:flex; /* Added */
width:calc(100% - 20px); /* Modified */
background-color: #000;
margin-left: 20px; /* Modified */
}
Here it is with seven steps:
const previousBtn = document.getElementById('previousBtn');
const nextBtn = document.getElementById('nextBtn');
const finishBtn = document.getElementById('finishBtn');
const content = document.getElementById('content');
const bullets = [...document.querySelectorAll('.bullet')];
const MAX_STEPS = 7;
let currentStep = 1;
nextBtn.addEventListener('click', () => {
bullets[currentStep - 1].classList.add('completed');
currentStep += 1;
previousBtn.disabled = false;
if (currentStep === MAX_STEPS) {
nextBtn.disabled = true;
finishBtn.disabled = false;
}
content.innerText = `Step Number ${currentStep}`;
});
previousBtn.addEventListener('click', () => {
bullets[currentStep - 2].classList.remove('completed');
currentStep -= 1;
nextBtn.disabled = false;
finishBtn.disabled = true;
if (currentStep === 1) {
previousBtn.disabled = true;
}
content.innerText = `Step Number ${currentStep}`;
});
finishBtn.addEventListener('click', () => {
location.reload();
});
#stepProgressBar {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 90%;
margin: 0 auto;
margin-bottom: 40px;
}
.step {
text-align: center;
width: 20%;
position: relative;
}
.step-text {
margin-bottom: 10px;
color: #000;
}
.bullet {
border: 1px solid #000;
height: 20px;
width: 20px;
color: #000;
display: inline-block;
transition: background-color 500ms;
line-height: 20px;
}
.bullet.completed {
color: white;
background-color: #000;
}
.bullet.completed::after {
content: '';
position: absolute;
bottom: 10px;
height: 1px;
width:calc(100% - 20px);
display:flex;
background-color: #000;
margin-left: 20px;
}
/* Base styles and helper stuff */
.hidden {
display: none;
}
button {
padding: 5px 10px;
border: 1px solid black;
transition: 250ms background-color;
}
button:hover {
cursor: pointer;
background-color: black;
color: white;
}
button:disabled:hover {
opacity: 0.6;
cursor: not-allowed;
}
.text-center {
text-align: center;
}
.container {
max-width: 100%;
margin: 0 auto;
margin-top: 20px;
padding: 40px;
}
<div class="container">
<div id="stepProgressBar">
<div class="step">
<p class="step-text">Super Duper Long Title</p>
<div class="bullet">1</div>
</div>
<div class="step">
<p class="step-text">Long Long Title</p>
<div class="bullet">2</div>
</div>
<div class="step">
<p class="step-text">Loooong Title</p>
<div class="bullet">3</div>
</div>
<div class="step">
<p class="step-text">Title</p>
<div class="bullet ">4</div>
</div>
<div class="step">
<p class="step-text">Title</p>
<div class="bullet ">5</div>
</div>
<div class="step">
<p class="step-text">Title</p>
<div class="bullet ">6</div>
</div>
<div class="step">
<p class="step-text">Title</p>
<div class="bullet ">7</div>
</div>
</div>
<div id="main">
<p id="content" class="text-center">Step Number 1</p>
<button id="previousBtn" class="hidden"></button>
<button id="nextBtn">Next</button>
<button id="finishBtn" class="hidden">Finish</button>
</div>
</div>
I'm trying to fit my sticky left menu to the height of my content, but I'm not be able to do it.
I try adding height: 100% to all parents div, but nothing happens
My code is: (before is and )
<main>
<div class="container">
<div class="content-wrapper">
<router-view />
</div>
<div class="navigation__menu">
<div
class="container-menu"
:class="{'show': this.$store.getters.showSidebar}">
<main-menu
#click.native="showNav" />
<menu-options />
</div>
</div>
</div>
</main>
<template>
<div id="main-menu">
<div class="control">
<i
class="fas fa-angle-double-right" />
</div>
</div>
</template>
<template>
<div id="menu-options">
<div
class="navigation-icons-menu">
<a
title="Home"
href="/"><i class="fas fa-home" /></a>
<a
title="FIG"
href="/fig-console"><i class="fas fa-clipboard-list" /></a>
<a
title="Service client"
href="/"><i class="fas fa-users" /></a>
<a
title="Budget"
href="/"><i class="fas fa-file-invoice" /></a>
<a
title="Contracting"
href="/"><i class="fas fa-file-contract" /></a>
<a
title="Invoicing"
href="/"><i class="fas fa-file-invoice-dollar" /></a>
<a
title="Administration"
href="/"><i class="fas fa-cogs" /></a>
</div>
<div
v-if="this.$store.getters.showSidebar"
class="navigation-links-menu">
<transition-group name="fade">
<div
v-show="this.$store.getters.showLink"
key="1">
<a
title="Home"
href="/">Home</a>
</div>
<div
v-show="this.$store.getters.showLink"
key="2">
<a
title="FIG"
href="/fig-console">FIG</a>
</div>
<div
v-show="this.$store.getters.showLink"
key="3">Service client</div>
<div
v-show="this.$store.getters.showLink"
key="4">Budget</div>
<div
v-show="this.$store.getters.showLink"
key="5">Contracting</div>
<div
v-show="this.$store.getters.showLink"
key="6">Invoicing</div>
<div
v-show="this.$store.getters.showLink"
key="7">Administration</div>
</transition-group>
</div>
</div>
</template>
.container-menu {
position: absolute;
top: 65px;
padding-top: 10px;
left: 0;
width: 62px;
min-height: 100%;
height: 100%;
background-color: $navy;
border: solid $white;
border-width: 0 1px 0 0;
z-index: 1001;
transition: all .5s ease-in-out;
.control {
display: flex;
justify-content: center;
align-items: center;
//width: 50px;
margin-bottom: 10px;
color: $white;
i {
font-size: 2rem;
cursor: pointer;
transition: all .5s ease-in-out;
}
}
&.show {
width: 170px;
.control > i {
color: $white;
transform: rotateZ(-180deg);
}
}
.navigation-icons-menu {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 50px;
float: left;
i {
color: $white;
font-size: 2rem;
padding: 10px 0;
cursor: pointer;
transition: all .5s ease-in-out;
&:hover {
color: $white;
}
}
}
.navigation-links-menu {
//padding:14px;
float: left;
color: $white;
div {
font-size: 1.35rem;
padding: 10px;
cursor: pointer;
#include breakpoint-only(tablet) {
font-size: 7px;
padding: 10px 5px;
}
a {
color: $white;
}
}
}
}
vh will solve your problem.
Instead of a pixel or percentage value. Use vh which stands for "viewport height".
An element with height: 100vh will be given a height the full height of the viewport.
.container-menu {
position: absolute;
top: 65px;
padding-top: 10px;
left: 0;
width: 62px;
height: 100vh;
background-color: $navy;
border: solid $white;
border-width: 0 1px 0 0;
z-index: 1001;
transition: all .5s ease-in-out;
.control {
display: flex;
justify-content: center;
align-items: center;
//width: 50px;
margin-bottom: 10px;
color: $white;
i {
font-size: 2rem;
cursor: pointer;
transition: all .5s ease-in-out;
}
}
&.show {
width: 170px;
.control > i {
color: $white;
transform: rotateZ(-180deg);
}
}
.navigation-icons-menu {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 50px;
float: left;
i {
color: $white;
font-size: 2rem;
padding: 10px 0;
cursor: pointer;
transition: all .5s ease-in-out;
&:hover {
color: $white;
}
}
}
.navigation-links-menu {
//padding:14px;
float: left;
color: $white;
div {
font-size: 1.35rem;
padding: 10px;
cursor: pointer;
#include breakpoint-only(tablet) {
font-size: 7px;
padding: 10px 5px;
}
a {
color: $white;
}
}
}
}
Hey friends I'm writing the media query for the footer of my website. I'm starting on a max-width of 425px. The first thing that gets messed up when i shrink the screen to this size is shown here - The red line doesn't add up, so i adjust and fix it, but when i shrink the screen to a max-width of 375px the red line moves again, so I create another media query with a max-width of 375px and adjust the line and fix it at 375, but now when i move the screen back up to 425 that line moves again? completely ignoring that style. So i have to adjust it again. But this then messes it up at 375??? What's happening? It's back and forth plz help -Example below
1st thing I do when I resize the screen to 425px and see the problem(as shown in the picture
`#media screen and (max-width: 425px) {
.social .inner:after {
margin-top: -40px;
}
}`
The above code aligns the red line where it needs to be when the screen has a max width of 425px. However when I shrink the screen to 375px the line moves again so maybe I do something like this
`#media screen and (max-width: 375px) {
.social .inner:after {
margin-top: -38px;
}
}`
This fixes at 375px. What now happens though is when i go back to 425px the line moves again? and then if that wasn't enough if you shrink down to 375px its misaligned??? Try it out and see
html, body {
margin: 0;
padding: 0;
}
/*---HEADER---*/
header {
background-image: url(../img/contact.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
}
.contact-wrapper{
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
}
header h1 {
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
}
/*---NAV---*/
nav {
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
}
li a {
text-decoration-line: none;
color: rgba(102,102,102,0.75);
}
ul {
margin-right: 30px;
margin-top: 25px;
}
li {
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
}
li a:hover {
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
}
.after:after {
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
}
.logo {
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
}
/*---MAIN---*/
.contact h2 {
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 10px;
}
.contact h2:after {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
}
.contact h2:before {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
}
.quote-info {
display: flex;
flex-direction: column;
width: 30%;
margin: 20px;
background-color: rgba(102, 102, 102, 0.2);
margin-bottom: 15px;
}
.quote-info input, .quote-info textarea {
width: 85%;
margin-left: auto;
margin-right: auto;
margin-bottom: 17px;
font-family: 'Rajdhani';
font-size: 1.2rem;
}
.quote-info p {
color: rgb(102, 102, 102);
text-align: center;
font-size: 1.45rem;
font-weight: bolder;
font-family: 'Rajdhani';
margin-bottom: 0;
}
.quote-info .send-quote {
width: 85%;
background-color: red;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
font-size: 1.2rem;
color: white;
font-family: 'Rajdhani';
border: none;
outline: none;
padding: 5px;
}
.send-quote:hover {
transition: all 0.5s ease;
background-color: #cc0000;
}
textarea {
resize: none;
}
hr {
width: 100%;
color: rgba(102, 102, 102);
}
.contact .container {
display: flex;
}
.contact-info h3 {
color: rgb(102, 102, 102);
font-size: 2.3rem;
margin-left: 25px;
font-family: 'Rajdhani';
margin-bottom: 0;
}
.contact-info h3:after {
content: '';
height: 1.5px;
display: inline-block;
background-color: grey;
width: 340%;
position: relative;
top: -30px;
}
.contact-numbers div {
margin-left: 30px;
font-family: 'Rajdhani';
font-size: 1.35rem;
}
.contact-numbers i {
color: red;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
}
.footer div {
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
}
.footer h1 {
font-size: 2rem;
margin-top: 15px;
}
.footer .inner {
margin-left: 55px;
}
.social .inner {
margin-left: 45px;
}
.contact .inner {
margin-left: 35px;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
}
.links .inner:after {
content: '';
width: 10.5%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -151px;
}
.social .inner:after {
content: '';
width: 5.8%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -171px;
}
.contact .inner:after {
content: '';
width: 7.5%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -174.5px;
}
.wrap:before {
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
}
.links a {
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
}
.links a:hover {
color: red;
}
.contact p {
position: relative;
top: -10px;
}
.social i {
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.social i:hover {
color: red;
cursor: pointer;
}
#msg {
margin-top: -15px;
}
.footer-textarea {
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 102%;
}
.footer button {
position: absolute;
margin-left: 23.2%;
margin-top: -40px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
}
button:hover {
cursor: pointer;
color: red;
}
.dark {
color: red;
}
.copyright {
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
}
/*------MEDIA-QUERIES------*/
#media screen and (max-width: 425px) {
/*---NAV---*/
.logo {
font-size: 2.5rem;
margin-left: 10px;
}
ul {
margin: 0;
padding: 0;
}
nav li {
display: none;
}
.ham-menu {
width: 55px;
height: 55px;
position: fixed;
right: 0;
top: 4px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.m1, .m2, .m3 {
border-radius: 4px;
margin: 4px;
width: 35px;
height: 3px;
background-color: red;
float: left;
}
/*---MAIN---*/
header h1 {
font-size: 3rem;
}
.quote-info {
width: 90%;
}
.quote-info p {
position: relative;
top: 2px;
}
.contact .container {
flex-direction: column;
}
.contact-info h3 {
margin-top: 0;
}
.contact-info h3:after {
width: 95%;
}
.contact-numbers {
margin-top: -15px;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
flex-direction: column;
}
.footer div {
margin: 0;
}
.footer h1 {
font-size: 2rem;
margin-top: 10px;
}
.footer .inner {
margin: 0;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 100%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
}
.links .inner:after {
width: 33%;
margin-top: -152px;
}
.social .inner {
position: relative;
top: -10px;
}
.social .inner:after {
content: '';
width: 18%;
height: 2px;
background-color: red;
position: absolute;
left: 0;
margin-top: -40px;
}
.contact .inner:after {
content: '';
width: 24%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -148px;
}
.links a {
margin-left: 5px;
}
.social h1 {
margin-bottom: 10px;
}
#msg {
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
}
.footer button {
right: 9.25%;
margin-top: 0.2px;
}
.social i {
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.footer-textarea {
width: 88.5%;
margin-top: 5px;
margin-left: 5px;
}
.contact p {
margin: 5px;
font-size: 1.2rem;
}
.copyright {
background-color: red;
}
.copyright span {
color: white;
background-color: red;
}
}
#media screen and (max-width: 375px) {
.social .inner:after {
margin-top: -36.5px;
width: 20%;
}
.links .inner:after {
width: 37%;
}
.contact .inner:after {
width: 27%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, intitial-scale=1.0">
<title>Contact | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/contact.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="contact-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1"></div>
<div class="m2"></div>
<div class="m3"></div>
</div>
<ul>
<li class="after">Home</li>
<li class="after">About</li>
<li class="after">Services</li>
<li class="after">Careers</li>
<li>Contact</li>
</ul>
</div>
</nav>
<h1>Contact Us</h1>
</div>
</header>
<section class="contact">
<h2>Get in touch</h2>
<div class="container">
<div class="quote-info">
<p>Get a Quote</p>
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
<input type="text" placeholder="Phone Number">
<input type="text" placeholder="Email">
<textarea name="project-details" id="" cols="40" rows="7" placeholder="Give us the specifics on your project"></textarea>
<button class="send-quote">Send</button>
</div>
<div class="contact-info">
<h3>Contact info</h3>
<div class="contact-numbers">
<div>
<i class="fas fa-phone"></i>
<p>(208)546-7827 -Matt</p>
<i class="fas fa-phone"></i>
<p>(208)546-7827 -Keegan</p>
</div>
<div>
<i class="fas fa-envelope"></i>
<p>P.O. Box 50860 IF, ID 83405</p>
<i class="fas fa-at"></i>
<p>KaneConcrete#fake.com</p>
</div>
</div>
</div>
</div>
</section>
<hr>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1>Quick Links</h1>
Home
About
Services
Careers
Contact
</div>
</div>
<div class="social">
<div class="inner">
<h1>Social</h1>
<i class="fab fa-linkedin"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter-square"></i>
<p id="msg">Send some feedback!</p>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="type here..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1>Contact</h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete#fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
</body>
</html>
I couldn't reproduce the problem here (or I didn't understand it completely). But let me point some possible problems with the CSS code there:
To create the red lines, you create an element after the content of the sections. To adjust the position, you are setting the margin to a negative value. This is problematic because the size of the section is not constant, so, the red line will have a sort of undefined position (actually it is bottom of section minus some pixels).
You can set the margin to 0 to verify how the size of the section is volatile (it will change when a line wraps, if the font changes, maybe from browser to browser, etc). I recommend instead using a natural flow, and add a line where its position is. A simple example could be:
header {
width: 300px;
}
h1 {
margin: 0;
margin-bottom: 10px;
}
.line {
height: 2px;
background: black;
}
.red-line {
height: 2px;
background: red;
width: 30%;
margin-top: -2px;
}
<header>
<h1>Quick Links</h1>
<div class="line"></div>
<div class="red-line"></div>
</header>
The negative margin here works because .red-line will always be 2px below .line.
Cya!