Div Element is Spilling of the Page Horizontally While the parent element is not

userCONh1 0
Viewed 28

I have a div on my that contains pieces of information on my webpage. I'm having a problem where when the window gets smaller, part of the div gets cropped off the page.

Notes: I have in my CSS inside my body element overflow-x: hidden;

The element that is spilling off the page contains a parent element. However, the parent element doesn't spill off the page.

View my code here https://codepen.io/Tech-World/pen/ExLgNZq

Code added below:

scrollTo (0, 800)
body {
  overflow-x: none;
}

.homepage-info {
    position: absolute;
    top: 1100px;
    width: 100vw;


}

.why-heading {
    text-align: center;
}

.info-blocks {
    background-color: rgb(29, 31, 29);
    height: 100px;
    padding: 500px;
    position: relative;
    top: 50px;
    padding-bottom: 300px;
    max-width: 100%;
}

.info-block {
    text-align: center;
    background-color: rgb(204, 204, 204);
    color: white;
    width: 25%;
    height: 200px;
   padding: 30px;
   margin: 50px;
   border-radius: 10px;  
}




#affordable {
    position:absolute;
    bottom: 500px;
    left: 1245px;
}

#real-code {
    position:absolute;
    top: 400px;
    left: 650px;
}

#in-person {
    position:absolute;
    bottom: 500px;
    left: 40px;
}

#code-line-1 {
    color: white;
    position: absolute;
    bottom: 825px;
    left: 43.5%;
}

#code-line-2 {
    color: white;
    position: absolute;
    bottom: 800px;
    left: 35.5%;
}
    <div class="homepage-info">
        <h1 class="why-heading">Scroll down and shrink your window size</h1>
        <div class="info-blocks">
        <div class="fade-out info-block right-align " id="affordable">
            <h2>Salve</h2>
            <p>Test</p>
        </div>

        <div class="fade-out info-block left-align" id="real-code">
            <h2>Hola</h2>
            <p>Test</p>
        </div>

        <div class="fade-out info-block right-align" id="in-person">
            <h2>Dobro</h2>
            <p>Test</p>
        </div>
    </div>

width css html
1 Answers

Check below link for revised code. https://codepen.io/nandujasthi/pen/zYjKzJz

Left of the div is mentioned in pixel with absolute position of element. Instead you can use the percentages to make it work efficiently in all the devices. Please check the link

body {
  overflow-x: none;
}
.homepage-info {
    position: absolute;
    top: 10%;
    width: 100vw;
    left: 0;
}

.why-heading {
    text-align: center;
}

.info-blocks {
    background-color: rgb(29, 31, 29);
    height: 100px;
    padding: 500px;
    position: relative;
    top: 5%;
    padding-bottom: 300px;
    max-width: 100%;
}

.info-block {
    text-align: center;
    background-color: rgb(204, 204, 204);
    color: white;
    width: 25%;
    height: 200px;
   padding: 30px;
   margin: 50px;
   border-radius: 10px;  
}
#affordable {
    position:absolute;
    top: 5%;
    right: 10%;
}

#real-code {
    position:absolute;
    top: 45%;
    left: 33%;
}

#in-person {
    position:absolute;
    bottom: 500px;
    left: 10%;
}

#code-line-1 {
    color: white;
    position: absolute;
    bottom: 825px;
    left: 43.5%;
}

#code-line-2 {
    color: white;
    position: absolute;
    bottom: 800px;
    left: 35.5%;
}
    <div class="homepage-info">
        <h1 class="why-heading">Scroll down and shrink your window size</h1>
        <div class="info-blocks">
        <div class="fade-out info-block right-align " id="affordable">
            <h2>Salve</h2>
            <p>Test</p>
        </div>

        <div class="fade-out info-block left-align" id="real-code">
            <h2>Hola</h2>
            <p>Test</p>
        </div>

        <div class="fade-out info-block right-align" id="in-person">
            <h2>Dobro</h2>
            <p>Test</p>
        </div>
    </div>



        
    </div>

Nandu Jasthi0
Related