How do i fix this positioning? - html

Question

i'm trying to create personal portfolio website, but having problem with position or images itself. I've tried everything, nothing fixes it. For example: tried adding float left, display block. Not working. I gave up at the end. Please help guys.
/* About - Portfolio */
.about-portfolio {
float: left;
width: 100%;
color: rgb(199, 199, 199);
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;}
.portfolio-header {
margin-top: 20px;}
.about-style .portfolio-text {
font-size: 40px;}
.about-portfolio:hover {
color: rgb(0, 0, 0);}
.works-gallery {
position: relative;}
.about-portfolio .grid-item {
padding: 0px;}
.works-gallery img {
width: 100%;}
.clearfix {
clear: both;
}
<div id="portfolio" class="about-portfolio">
<div class="portfolio-header">
<h2 class="portfolio-text">Our Works</h2>
<div class="divider"></div>
</div>
<div class="col-sm-6 col-md-4 grid-item">
<div class="works-gallery">
<a href="img/1.png">
<img src="assets/img/portfolio/portfolio-1.jpg" alt="Image description" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 grid-item">
<div class="works-gallery">
<a href="img/1.png">
<img src="assets/img/portfolio/portfolio-2.jpg" alt="Image description" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 grid-item">
<div class="works-gallery">
<a href="img/1.png">
<img src="assets/img/portfolio/portfolio-3.jpg" alt="Image description" class="img-responsive">
</a>
</div>
</div>
<!-- CLEARFIX -->
<div class="clearfix"></div>
<div class="col-sm-6 col-md-4 grid-item">
<div class="works-gallery">
<a href="img/1.png">
<img src="assets/img/portfolio/portfolio-4.jpg" alt="Image description" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 grid-item">
<div class="works-gallery">
<a href="img/1.png">
<img src="assets/img/portfolio/portfolio-5.jpg" alt="Image description" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 grid-item">
<div class="works-gallery">
<a href="img/1.png">
<img src="assets/img/portfolio/portfolio-6.jpg" alt="Image description" class="img-responsive">
</a>
</div>
</div>
</div>
That whitespace
after adding clearfix

Answer 1

What you are asking for is already provided by Bootstrap library out of the box. All you need to do is take care not to break the necessary markup. Here's a working example:
.img-responsive {
min-width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="portfolio" class="about-portfolio">
<div class="portfolio-header">
<h2 class="portfolio-text">Our Works</h2>
<div class="divider"></div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4 grid-item">
<div class="works-gallery">
<a href="img/1.png">
<img src="http://placehold.it/350x150/E8117F/ffffff" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 grid-item">
<div class="works-gallery">
<a href="img/1.png">
<img src="http://placehold.it/350x150/999999/ffffff" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 grid-item">
<div class="works-gallery">
<a href="img/1.png">
<img src="http://placehold.it/350x150/ffffff/666666" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 grid-item">
<div class="works-gallery">
<a href="img/1.png">
<img src="http://placehold.it/350x150/E8117F/ffffff" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 grid-item">
<div class="works-gallery">
<a href="img/1.png">
<img src="http://placehold.it/350x150/999999/ffffff" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 grid-item">
<div class="works-gallery">
<a href="img/1.png">
<img src="http://placehold.it/350x150/ffffff/666666" class="img-responsive">
</a>
</div>
</div>
</div>
</div>
</div>
You might notice the only CSS rule I added is making small images fit their parent width. Also please notice there is only one row that contains all the col-*s. There is no need of any .clearfix.
If you want the images to be glued together, the simplest way would be to use this CSS:
.img-responsive {
min-width: calc(100% + 30px);
position: relative;
left: -15px;
}
.img-responsive {
min-width: calc(100% + 30px);
position: relative;
left: -15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="portfolio" class="about-portfolio">
<div class="portfolio-header">
<h2 class="portfolio-text">Our Works</h2>
<div class="divider"></div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4 grid-item">
<div class="works-gallery">
<a href="img/1.png">
<img src="http://placehold.it/350x150/E8117F/ffffff" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 grid-item">
<div class="works-gallery">
<a href="img/1.png">
<img src="http://placehold.it/350x150/787878/ffffff" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 grid-item">
<div class="works-gallery">
<a href="img/1.png">
<img src="http://placehold.it/350x150/ffffff/666666" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 grid-item">
<div class="works-gallery">
<a href="img/1.png">
<img src="http://placehold.it/350x150/E8117F/ffffff" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 grid-item">
<div class="works-gallery">
<a href="img/1.png">
<img src="http://placehold.it/350x150/999999/ffffff" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 grid-item">
<div class="works-gallery">
<a href="img/1.png">
<img src="http://placehold.it/350x150/cccccc/666666" class="img-responsive">
</a>
</div>
</div>
</div>
</div>
</div>

Answer 2

The problem you're running into is quite common in grid layouts. If each column isn't exactly the same height they won't clear correctly.
You need to clear the first element of each new row. The clearfix div you've added will break the 2 column version of the layout. It's also worth noting that Bootstrap includes a clearfix class so the styling you've added is overriding defaults.
Start by wrapping all your grid items in a div.
<div class="work-gallery-container clearfix">
<div class="col-sm-6 col-md-4 grid-item">
<div class="works-gallery">
<a href="img/1.png">
<img src="assets/img/portfolio/portfolio-1.jpg" alt="Image description" class="img-responsive">
</a>
</div>
</div>
. . . ALL THE WAY TO THE LAST ITEM . . .
<div class="col-sm-6 col-md-4 grid-item">
<div class="works-gallery">
<a href="img/1.png">
<img src="assets/img/portfolio/portfolio-6.jpg" alt="Image description" class="img-responsive">
</a>
</div>
</div>
</div><!-- .work-gallery-container -->
Then apply some CSS.
#media only screen and (min-width: 768px) and (max-width: 991px) {
.work-gallery-container .grid-item:nth-child(2n+1) {
clear: both;
}
}
#media only screen and (min-width: 992px) {
.work-gallery-container .grid-item:nth-child(3n+1) {
clear: both;
}
}
This assumes that you're using standard Bootstrap 3 breakpoints.