Skip to content

Commit

Permalink
fix: set banner:before height to 100vh so it doesn't overlap with bel…
Browse files Browse the repository at this point in the history 
…ow element (#147)
  • Loading branch information
@prashantsingh181
prashantsingh181 authored Oct 14, 2024
1 parent 467cc61 commit ddb3c4f
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 151 deletions.
150 changes: 0 additions & 150 deletions assets/css/responsiveness.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,6 @@
display: flex;
gap: 2rem;
}
.banner::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 160vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(29, 29, 29, 0.6)),
url("../images/child-hands-holding-caring-young-green-plant.webp");
background-size: cover;
background-repeat: repeat;
background-attachment: fixed;
z-index: -1;
}
}

@media only screen and (min-width: 600px) and (max-width: 650px) {
Expand All @@ -57,21 +42,6 @@
.socialmediaName {
font-size: 8px;
}
.banner::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 160vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(29, 29, 29, 0.6)),
url("../images/child-hands-holding-caring-young-green-plant.webp");
background-size: cover;
background-repeat: repeat;
background-attachment: fixed;
z-index: -1;
}
}

@media only screen and (min-width: 500px) and (max-width: 600px) {
Expand All @@ -92,21 +62,6 @@
.socialmediaName {
font-size: 0.8rem;
}
.banner::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 160vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(29, 29, 29, 0.6)),
url("../images/child-hands-holding-caring-young-green-plant.webp");
background-size: cover;
background-repeat: repeat;
background-attachment: fixed;
z-index: -1;
}
}

@media only screen and (min-width: 400px) and (max-width: 500px) {
Expand Down Expand Up @@ -188,21 +143,6 @@
.imgWrapper i {
margin-right: 0px;
}
.banner::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 190vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(29, 29, 29, 0.6)),
url("../images/child-hands-holding-caring-young-green-plant.webp");
background-size: cover;
background-repeat: repeat;
background-attachment: fixed;
z-index: -1;
}
}

@media only screen and (min-width: 400px) and (max-width: 440px) {
Expand All @@ -212,21 +152,6 @@
.social_medias {
gap: 20px;
}
.banner::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 160vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(29, 29, 29, 0.6)),
url("../images/child-hands-holding-caring-young-green-plant.webp");
background-size: cover;
background-repeat: repeat;
background-attachment: fixed;
z-index: -1;
}
}

@media only screen and (min-width: 300px) and (max-width: 399px) {
Expand Down Expand Up @@ -307,21 +232,6 @@
.imgWrapper i {
margin-right: 0px;
}
.banner::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 190vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(29, 29, 29, 0.6)),
url("../images/child-hands-holding-caring-young-green-plant.webp");
background-size: cover;
background-repeat: repeat;
background-attachment: fixed;
z-index: -1;
}
}

@media only screen and (min-width: 250px) and (max-width: 299px) {
Expand Down Expand Up @@ -388,21 +298,6 @@
/* gap: 3rem; */
width: 100%;
}
.banner::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 190vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(29, 29, 29, 0.6)),
url("../images/child-hands-holding-caring-young-green-plant.webp");
background-size: cover;
background-repeat: repeat;
background-attachment: fixed;
z-index: -1;
}
}

.MenuBar {
Expand All @@ -413,21 +308,6 @@
nav .nav_buttons {
width: 45%;
}
.banner::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 130vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(29, 29, 29, 0.6)),
url("../images/child-hands-holding-caring-young-green-plant.webp");
background-size: cover;
background-repeat: repeat;
background-attachment: fixed;
z-index: -1;
}
}

@media (max-width: 995px) {
Expand All @@ -438,21 +318,6 @@
.MenuBar {
display: contents;
}
.banner::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 160vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(29, 29, 29, 0.6)),
url("../images/child-hands-holding-caring-young-green-plant.webp");
background-size: cover;
background-repeat: repeat;
background-attachment: fixed;
z-index: -1;
}
}

@media (max-width: 412px) {
Expand Down Expand Up @@ -498,19 +363,4 @@
.logo img {
width: 130px;
}
.banner::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 190vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(29, 29, 29, 0.6)),
url("../images/child-hands-holding-caring-young-green-plant.webp");
background-size: cover;
background-repeat: repeat;
background-attachment: fixed;
z-index: -1;
}
}
3 changes: 2 additions & 1 deletion assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ html {
height: 100vh;
display: grid;
grid-template-rows: 10% 1fr;
margin-bottom: 0;
}

.banner::before {
Expand All @@ -151,7 +152,7 @@ html {
right: 0;
top: 0;
bottom: 0;
height: 110vh;
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(29, 29, 29, 0.6)),
url("../images/child-hands-holding-caring-young-green-plant.webp");
background-size: cover;
Expand Down

0 comments on commit ddb3c4f

Please sign in to comment.