Why is my background shrinking on my div?

HTML-CSS
1
  1. 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’m trying to copy the design as someone else’s request). My site is https://betafrosst.netlify.app (The divUnderThatNav div is the problem).

HTML

<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>

CSS

  @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;
}

I’ve 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 don’t work. I’ve looked at another post and it said to do display: inline-block; I’ve tried it instead of flex it does not work.

2

Change the ‘height’ property in the media queries for particular screen sizes:

@media screen and (max-width: 850px) {
#divUnderThatNav {
    margin-top: 10px;
    width: 90vw;
    height: 45vh; ...this is just an example!
 }
}

You should get something like this:
image
400px * 500px

2 Likes
3

I was looking toward a 1 3 line code solution but this works thanks a lot I appreciate your help!

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.