I am working on my school activity website, I try adjusting my background size where it needs to be responsive just like the pictures that I put but when I run the code it doesn't follow the images. I also tried to put media queries but it just didn't work, please help.

here is the html & css code:

*{
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}
 /* project*/

 #project {
   background: #033541;
   width: 100%;
   height: 100vh;
   overflow-x: hidden;
}


.project-title h2{
    color: white;
    font-size: 75px;
    margin: 30px auto;
    text-align: center;
   font-family: 'Poppins', sans-serif;
}

.gallery {
   padding: 30px;
   position: absolute;
   justify-content: center;
   align-items: center;
   width: 98vw;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(230px, 230px));
   column-gap: 15px;
   row-gap: 15px;
}


.gallery img {
    
   border-radius: 10px;
    width: 230px;
    height: 230px;
    object-fit: cover;
    object-position: center;
 }

<!----project start---->
<div id = "project">
    <div class = "pro">
        <div class="project-title">
        <h2>PROJECT</h2>
        </div>
        <div class="gallery">
        <img src = "image1.jpg" />
        <img src = "image2.jpg" />
        <img src = "image3.jpg" />
        <img src = "image4.jpg" />
        <img src = "image5.jpg" />
        <img src = "image6.jpg" />
        <img src = "image7.jpg" />
        <img src = "image8.jpg" />
        </div>
        </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Use height: auto for #project and change position: absolute to position: relative for .gallery .

Because making position: absolute without any parent element with position: relative tells that these elements are positioned according to viewport(or screen), they don't relate to parent element.
So height is spanned to parent element only without taking them into consideration

If you just remove position and add height: auto. It will also work

*{
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}
 /* project*/

 #project {
   background: #033541;
   width: 100%;
   height: auto;
   overflow-x: hidden;
}


.project-title h2{
    color: white;
    font-size: 75px;
    margin: 30px auto;
    text-align: center;
   font-family: 'Poppins', sans-serif;
}

.gallery {
   padding: 30px;
   position: relative;
   justify-content: center;
   align-items: center;
   width: 98vw;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(230px, 230px));
   column-gap: 15px;
   row-gap: 15px;
}


.gallery img {
    
   border-radius: 10px;
    width: 230px;
    height: 230px;
    object-fit: cover;
    object-position: center;
 }

<!----project start---->
<div id = "project">
    <div class = "pro">
        <div class="project-title">
        <h2>PROJECT</h2>
        </div>
        <div class="gallery">
        <img src = "image1.jpg" />
        <img src = "image2.jpg" />
        <img src = "image3.jpg" />
        <img src = "image4.jpg" />
        <img src = "image5.jpg" />
        <img src = "image6.jpg" />
        <img src = "image7.jpg" />
        <img src = "image8.jpg" />
        </div>
        </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>