CODEWITHSUNDEEP
htmlcssflexbox
KarolGral
KarolGral

Reputation: 53

I don't understand that blank spacing inside the div

It would be better if you would check the code on the editor to see it but here is quick explanation: I really don't get what is creating white space between two divs — textprojects and gallery. They are inside a flexbox div with justify content: space-between and they have huge gap between. After inspecting the site you can see that it's the gallery problem.

I tried deleting the margin and the padding for the images, and for the div and it doesn't work. I searched it for a long time now and I can't find it, help would be much apriciated 

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>People</title>
    <link rel='stylesheet' href='styles/styles.css'>
</head>

<body>
    <header>
        <div class='logo'>LOGO</div>
        <ul class='navbar'>
            <li><a class='light' href='./home.html'>Home</a></li>
            <li><a href='./projects.html'>Projects</a></li>
            <li><a href='./contact.html'>Contact</a></li>
        </ul>
    </header>
    <div class='wholeprojects'>
        <div class='textprojects'>
            <h1>Ut enim ad minima.</h1>
            <p>Quis nostrum exercitationem ullam corpori suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.
                Sed ut perspiciatis unde omnis iste
                natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
                inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo
            </p>
        </div>
        <div class='gallery'>
            <div class="row">
                <div class="column">
                    <img src="images/gallery1.jpg" style="width:90%">
                    <p>Sed ut perspiciatis omnis</p>
                </div>
                <div class="column">
                    <img src="images/gallery2.jpg" style="width:90%">
                    <p>Sed ut perspiciatis omnis</p>
                </div>
                <div class="column">
                    <img src="images/gallery3.jpg" style="width:90%">
                    <p>Sed ut perspiciatis omnis</p>
                </div>
            </div>
            <div class="row">
                <div class="column">
                    <img src="images/gallery1.jpg" style="width:90%">
                    <p>Sed ut perspiciatis omnis</p>
                </div>
                <div class="column">
                    <img src="images/gallery2.jpg" style="width:90%">
                    <p>Sed ut perspiciatis omnis</p>
                </div>
                <div class="column">
                    <img src="images/gallery3.jpg" style="width:90%">
                    <p>Sed ut perspiciatis omnis</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

 <style>
  .wholeprojects {
    padding-top: 5em;
    display: flex;
    justify-content: space-between;
    width: 85%;
    margin: 0px auto;
}
.textprojects {
    width: 25% !important;
}


.row {
    margin-top: 3em;
    width: 70%;
    float: right;
    display: flex;
  }
  
  .column {
    flex: 33.33%;
    padding: 5px;
    p {
        color: $textColorgrey;
        font-weight: 400;
        font-style: italic;
        font-size: 0.8em;
    }
    img {
        filter: brightness(95%);
        transition: transform 0.05s;
        &:hover {
            transform: scale(1.03);
        }
    }
  }

</style>

Upvotes: 0

Views: 51

Answers (1)

Greg Schmidt
Greg Schmidt

Reputation: 5099

.wholeprojects is 85% of the width of the canvas. Inside that, you have .textprojects and .gallery. The former is 25% of the width of its parent, .wholeprojects, meaning .gallery will be 75% of the width of that. (Remember, these are percentages of the 85% that you're already down to, so 21.25% and 63.75% of the total canvas width.)

Now, .gallery has .rows in it, which are 70% of the width of their parent. Being float: right, this means that the leftmost 30% of .gallery is unused. That's your big gap.

Solution, just give .row a width of 100% instead of 70%.

Upvotes: 1

Related Questions