When I make my screen height small the background on my div shrinks and the content overflows, how do I stop this?
for example, on https://www.lifesteal.rip/ when you shrink the height, the welcome to Life Steal element doesn’t change but on my website (I am trying to copy the design as someone else’s request).
My site is https://betafrosst.netlify.app (The divUnderThatNav div is the problem).
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500&display=swap');
*, ::after, ::before {
box-sizing: border-box;
}
body {
background: rgb(14,150,144);
background: -moz-linear-gradient(180deg, rgba(14,150,144,1) 0%, rgba(16,16,16,1) 60%, rgba(16,16,16,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(14,150,144,1) 0%, rgba(16,16,16,1) 60%, rgba(16,16,16,1) 100%);
background: linear-gradient(180deg, rgba(14,150,144,1) 0%, rgba(16,16,16,1) 60%, rgba(16,16,16,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0e9690",endColorstr="#101010",GradientType=1);
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
margin: 0px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#main {
height: 103px;
width: 60vw;
display: inline-block;
background-color: black;
padding: 10px 100px 10px 100px;
}
#main img {
margin-bottom: -23px;
}
#main h1 {
text-transform: none;
font-weight: 600;
font-size: 1.4rem;
display: inline-block;
margin-top: 5px;
}
#main h3 {
position:absolute;
top: 29em;
left: 22.5em;
color: rgb(25, 236, 225);
font-weight: 500;
}
#steveImg {
margin-top: -10px;
width: auto;
height: 160px;
}
.btn:hover, .btn1:hover {
transition: 0.5s;
filter: brightness(75%);
}
#main {
transition: margin-left .5s;
padding: 20px;
}
#divUnderThatNav {
background-color: black;
color: white;
height: 20vh;
width: 90vw;
display: flex;
margin: auto;
margin-top: 100px;
grid-template-columns: 3;
grid-template-rows: 1;
border-radius: 5px;
}
.steveimage {
width: auto;
}
#divUDTH-dhil1 {
margin-top: 1vh;
}
#divUDTH-dhil1 h1 {
color:rgb(0, 255, 242);
font-size: 25px;
font-weight: 500;
}
#divUDTH-dhil1 h3 {
color:#BDBDBD;
font-weight: 400;
}
#divUDTH-dhil2 {
margin-top: 7vh;
margin-left: 5vw;
}
#divUDTH-dhil2 button {
background-color: rgb(7, 176, 168);
border-radius: 5px;
padding: 15px;
padding-left: 20px;
padding-right: 20px;
border: none;
font-size: 20px;
color: white;
margin-right: 15px;
cursor: pointer;
}
#divUDTH-dhil2 button:hover {
filter: brightness(80%);
transition: 0.2s;
}
#a {
font-size: 30px;
color: #fff;
text-shadow:
0 0 10px #fff,
0 0 13px #fff,
0 0 24px #fff,
0 0 45px rgb(0, 229, 255),
0 0 85px rgb(0, 229, 255),
0 0 95px rgb(0, 229, 255),
0 0 105px rgb(0, 229, 255),
0 0 154px rgb(0, 229, 255);
margin-top: 3.6vh;
margin-left: 1vw;
border: 3px solid rgb(61, 61, 61);
padding: 25px;
height: min-content;
background-color: #2d2d2dbc;
}
@media screen and (max-width: 1160px) {
#divUDTH-dhil1 {
margin-top: 5.5vh;
}
#navimg1 {
margin-top: -1vh;
width: 400px;
}
#divUDTH-dhil1 h3 {
color:#BDBDBD;
font-weight: 400;
font-size: 15px;
width: max-content;
}
#divUDTH-dhil1 h1 {
font-weight: 400;
font-size: 20px;
width: max-content;
}
#divUnderThatNav {
margin-top: 10px;
width: 90vw;
height: 25vh;
}
#divUDTH-dhil2 {
margin-top: 3vh;
margin-left: 5vw;
}
#divUDTH-dhil2 button {
background-color: rgb(7, 176, 168);
border-radius: 5px;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
border: none;
font-size: 20px;
color: white;
margin-left: 50px;
}
#but2 {
margin-top: 15px;
}
#but1 {
width: 119px;
}
#ip1, #ip {
margin-top: -11vh;
}
}
@media screen and (max-width: 1566px) {
#a {
font-size: 20px;
margin-top: 4.5vh;
}
}
@media screen and (max-width: 1456px) {
#a {
font-size: 15px;
margin-top: 4.5vh;
}
}
@media screen and (max-width: 1400px) {
#a {
display: none;
}
}
@media screen and (max-width: 900px) {
.steveimage {
display: none;
}
#divUDTH-dhil1 {
margin-left: 10vw;
}
}
@media screen and (max-width: 850px) {
#divUDTH-dhil1 {
margin-top: 5.5vh;
margin-left: 10vw;
}
#navimg1 {
width: 300px;
}
#divUDTH-dhil1 h3 {
color:#BDBDBD;
font-weight: 400;
font-size: 15px;
width: max-content;
}
#divUDTH-dhil1 h1 {
font-weight: 400;
font-size: 20px;
width: max-content;
}
#divUnderThatNav {
margin-top: 10px;
width: 90vw;
height: 25vh;
}
#divUDTH-dhil2 {
margin-top: 3vh;
margin-left: 5vw;
}
#divUDTH-dhil2 button {
background-color: rgb(7, 176, 168);
border-radius: 5px;
padding: 10px;
padding-left: 10px;
padding-right: 10px;
border: none;
font-size: 20px;
color: white;
margin-left: 50px;
}
#but2 {
margin-top: 15px;
width: 119px;
}
#but1 {
width: 119px;
}
}
@media screen and (max-width: 650px) {
#divUDTH-dhil2 {
margin-top: 3vh;
margin-left: 3vw;
}
#divUDTH-dhil2 button {
background-color: rgb(7, 176, 168);
border-radius: 5px;
padding: 10px;
padding-left: 10px;
padding-right: 10px;
border: none;
font-size: 20px;
color: white;
margin-left: 50px;
}
#but2 {
margin-top: 15px;
width: 119px;
}
#but1 {
width: 119px;
}
}
@media screen and (max-width: 620px) {
#divUDTH-dhil2 {
display: none;
}
}
@media screen and (max-height: 500px) {
#divUDTH-dhil2 button {
background-color: rgb(7, 176, 168);
border-radius: 5px;
padding: 10px;
padding-left: 10px;
padding-right: 10px;
border: none;
font-size: 15px;
color: white;
margin-left: 50px;
}
}
@media screen and (max-height: 440px) {
#divUDTH-dhil2 button {
background-color: rgb(7, 176, 168);
border-radius: 5px;
padding: 10px;
padding-left: 10px;
padding-right:10px;
border: none;
font-size: 10px;
color: white;
margin-left: 50px;
}
}
@media screen and (max-height: 416px) {
#divUDTH-dhil2 {
margin-top: 3vh;
margin-left: 3vw;
}
#divUDTH-dhil2 button {
background-color: rgb(7, 176, 168);
border-radius: 5px;
padding: 12px;
padding-left: 12px;
padding-right:12px;
border: none;
font-size: 12px;
color: white;
margin-left: 50px;
}
#but2 {
margin-top: 15px;
width: 119px;
}
#but1 {
width: 119px;
}
}
@media screen and (max-height: 530px) {
#divUDTH-dhil1 {
margin-top: 3.4vh;
}
}
@media screen and (max-height: 400px) {
#divUDTH-dhil1 {
margin-top: 1vh;
}
}
#voteButtons {
margin-top: -25vh;
margin-left: 3vw;
}
.flexBreak {
flex-basis: 100%;
width: 0px;
height: 0px;
overflow: hidden;
}
#voteButtons i {
color: rgba(255, 255, 255, 0.6);
transform: rotate(10deg);
font-size: 1.8rem;
transition: 0.25s;
margin-left: 1.5vw;
}
#voteButtons a {
display: inline-block;
margin-right: 40px;
}
#voteButtons button {
justify-content: center;
background-color: rgb(14,150,144);
padding: 1.5rem;
font-size: 1.1rem;
justify-content: center;
width: 100%;
padding-right: 5vw;
padding-left: 5vw;
border: none;
color: white;
border-radius: 5px;
cursor: pointer;
transition: 0.4s;
}
#voteButtons button:hover {
filter: brightness(80%);
}
#voteButtons button span {
font-size: 1.5rem;
font-weight: 600;
}<div id="divUnderThatNav">
<img src="images/steve.png" class="steveimage">
<span id="divUDTH-dhil1">
<h1>Welcome to Frostoase Shop.</h1>
<h3>We have a large community constantly active.</h3>
</span>
<span id="divUDTH-dhil2">
<button id="but1">
Ranks
</button>
<button id="but2">
Gift Cards
</button>
</span>
<span id="a">
% 25 off all items!
</span>
</div>I have tried going on stack overflow and other resourceful sites and even chatGPT 3.5 nothing good I’ve also tried stuff like min-height: 20vh; height: max-content; height: auto; but they didn’t work.
I looked at another post and it said to do display: inline-block; I tried it instead of flex it didn’t not work.
2
Answers
The problem is that you’re setting the height of
#divUnderThatNavto20vhwhich is relative to the screen view height, so when you decrease the view height that div height automatically decreases as well.To fix this just remove
height: 20vh;from the selector#divUnderThatNavand it should take as much height as it needs to show it’s content.Here’s a working example:
Hope that helps
If i understood the right problem is that when you reduce the viewport it reduce the background too moving the 2 color effects. this happen when you use vh isted of px. lifesteal website is set to work with pixels so has nothing to worry about the viewport