when i resize the browser my sections are mixing each other
one section has two rows and 12 images
then
new section starts
and it has only one header if i resize my chrome browser those things are mixing
but in inspect tools it is not mixing working very well
why is that
here is my code
.second-page {
height: 100vh;
}
.second-page img {
width: 230px;
height: 137px;
padding: 5px;
filter: grayscale(100%);
transition: .5s;
}
.second-page img:hover {
filter: grayscale(0%);
transform: scale(1.1);
transform: .3s;
}
/* second-page ends */
/* third-page starts */
.third-page {
height: 100vh;
}
<section class="second-page">
<h1 class="text-center my-5">Intended Projects</h1>
<div class="row">
<div class="col-md-12 my-5 text-center">
<img src="https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/30/thumbs_b_c_a4a6996640e91d4ff86a71f5d9d9f84b.jpg?v=225920" alt="">
<img src="https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/30/thumbs_b_c_a4a6996640e91d4ff86a71f5d9d9f84b.jpg?v=225920" alt="">
<img src="https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/30/thumbs_b_c_a4a6996640e91d4ff86a71f5d9d9f84b.jpg?v=225920" alt="">
<img src="https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/30/thumbs_b_c_a4a6996640e91d4ff86a71f5d9d9f84b.jpg?v=225920" alt="">
<img src="https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/30/thumbs_b_c_a4a6996640e91d4ff86a71f5d9d9f84b.jpg?v=225920" alt="">
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-6 my-5 text-center">
<img src="https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/30/thumbs_b_c_a4a6996640e91d4ff86a71f5d9d9f84b.jpg?v=225920" alt="">
<img src="https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/30/thumbs_b_c_a4a6996640e91d4ff86a71f5d9d9f84b.jpg?v=225920" alt="">
<img src="https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/30/thumbs_b_c_a4a6996640e91d4ff86a71f5d9d9f84b.jpg?v=225920" alt="">
<img src="https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/30/thumbs_b_c_a4a6996640e91d4ff86a71f5d9d9f84b.jpg?v=225920" alt="">
<img src="https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/30/thumbs_b_c_a4a6996640e91d4ff86a71f5d9d9f84b.jpg?v=225920" alt="">
</div>
</div>
</section>
<!-- second-page ends -->
<!-- third-page starts -->
<section class="third-page ">
<h1 class="text-center">Our Developers Team</h1>
</section>
Your issue is not clear, still i've made this section responsive!
Add link of image in href, replacing #.
The third section is merged in second! it has to be inside a .
<section class="second-page">
<h1 class="text-center my-5">Intended Projects</h1>
<div class="row">
<div class="col-md-12 my-5 text-center">
<img src="#" alt="">
<img src="#" alt="">
<img src="#" alt="">
<img src="#" alt="">
<img src="#" alt="">
</div>
</div>
<div class="row">
<div class="col-md-12 my-5 text-center">
<img src="#" alt="">
<img src="#" alt="">
<img src="#" alt="">
<img src="#" alt="">
<img src="#" alt="">
</div>
</div>
<div>
<h1 class="text-center">Our Developers Team</h1>
</div>
</section>
Related
Example what i need:
Image:
My code is this:
<div class="container">
<div class="row">
<div class="col-3">
<img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
</div>
<div class="col-6">
<img src="image1.png" class="img-thumbnail mx-auto d-block" alt="Belgrade">
</div>
<div class="col-3">
<img src="image1.png" class="img-thumbnail float-right" alt="Niš">
</div>
</div>
<!-- THIS IS PROBLEM -->
<div class="row">
<!-- THIS COLUMN NEED TO BE BELOW 1 COLUMN / LEFT SIDE -->
<div class="col-3">
<img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
</div>
<!-- THIS COLUMN NEED TO BE BELOW 3 COLUMN / RIGHT SIDE -->
<div class="col-3 ml-auto">
<img src="image1.png" class="img-thumbnail float-right" alt="Novi Sad">
</div>
</div>
<!-- END PROBLEM -->
<div class="row">
<div class="col-4">
<img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
</div>
<div class="col-4">
<img src="image1.png" class="img-thumbnail mx-auto d-block" alt="Novi Sad">
</div>
<div class="col-4">
<img src="image1.png" class="img-thumbnail float-right" alt="Novi Sad">
</div>
</div>
</div>
I can't figure where is the problem. If someone know where problem is, write solution. Thanks
PS. Sorry for my Bad english
Thanks All..
Edit: I've updated my answer to include background images, and to mimic the original layout better. Thanks to AndreiGheorghiu for help answering this more accurately.
.grid{
display: grid;
grid-gap:10px;
height:500px;
grid-template-columns: 1fr .2fr 1fr .2fr 1fr;
grid-template-areas: "topLeft large large large topRight"
"midLeft large large large midRight"
"bottomLeft bottomLeft bottomCenter bottomRight bottomRight";
}
.pic{
background: url(https://placeimg.com/400/400/any) no-repeat center/cover;
font: 700 20px sans-serif;
color:white;
display:flex;
align-items:center;
justify-content:center;
text-shadow:2px 2px 5px #000;
}
.pic-1{
grid-area: topLeft;
}
.pic-2{
grid-area: large;
}
.pic-3{
grid-area: topRight;
}
.pic-4{
grid-area: midLeft;
}
.pic-5{
grid-area: midRight;
}
.pic-6{
grid-area: bottomLeft;
}
.pic-7{
grid-area: bottomCenter;
}
.pic-8{
grid-area: bottomRight;
}
<div class="grid">
<div class="pic pic-1">Foxwoods</div>
<div class="pic pic-2">New York City</div>
<div class="pic pic-3">Las Vegas</div>
<div class="pic pic-4">Philadelphia</div>
<div class="pic pic-5">San Francisco</div>
<div class="pic pic-6">Miami</div>
<div class="pic pic-7">Boston</div>
<div class="pic pic-8">Washington D.C.</div>
</div>
You can try this code,
Note: Included responsive classes. Run this code as a full page
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail mt-md-4" alt="Novi Sad">
</div>
<div class="col-md-6">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Belgrade">
</div>
<div class="col">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Niš">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail mt-md-4" alt="Novi Sad">
</div>
</div>
<div class="row mt-md-4">
<div class="col-md-4">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
</div>
</div>
</div>
You need to put the small images in the same col. And display them as blocks: display:block; width: 100%; height: auto;.
Here's how I'd personally do it. I'm using .no-gutter class on .rows and white borders on images:
[my-gallery]:not(#_) {
padding: 8px;
}
[my-gallery] img {
display: block;
background-color: #f5f5f5;
width: 100%;
height: auto;
border: 8px solid white;
}
[my-gallery] .strethed img {
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" my-gallery>
<div class="row no-gutters">
<div class="col">
<img src="https://picsum.photos/300/200/?random" alt="Novi Sad">
<img src="https://picsum.photos/303/202/?random" alt="Novi Sad">
</div>
<div class="col-6 strethed">
<img src="https://picsum.photos/306/204/?random" alt="Belgrade">
</div>
<div class="col">
<img src="https://picsum.photos/309/206/?random" alt="Niš">
<img src="https://picsum.photos/312/208/?random" alt="Novi Sad">
</div>
</div>
<div class="row no-gutters" >
<div class="col">
<img src="https://picsum.photos/315/210/?random" alt="Novi Sad">
</div>
<div class="col">
<img src="https://picsum.photos/318/212/?random" alt="Novi Sad">
</div>
<div class="col">
<img src="https://picsum.photos/321/214/?random" alt="Novi Sad">
</div>
</div>
</div>
i want to show products like different gird. i think i don't know what my question but i am showing product like this image:
i tried to bootstrap but no response.
my code is :
<div class="col-md-2 column productbox">
<img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive">
<div class="producttitle">Product 2</div>
<div class="productprice">
<div class="pull-right">BUY</div>
<div class="pricetext">£8.95</div>
</div>
</div>
<div class="col-md-2 column productbox">
<img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive">
<div class="producttitle">Product 2</div>
<div class="productprice">
<div class="pull-right">BUY</div>
<div class="pricetext">£8.95</div>
</div>
</div>
<div class="col-md-2 column productbox">
<img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive">
<div class="producttitle">Product 3</div>
<div class="productprice">
<div class="pull-right">BUY</div>
<div class="pricetext">£8.95</div>
</div>
</div>
<div class="col-md-2 column productbox">
<img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive">
<div class="producttitle">Product 4</div>
<div class="productprice">
<div class="pull-right">BUY</div>
<div class="pricetext"> £8.95</div>
</div>
</div>
anybody can help me?
thanks
You can achieve this using CSS3 Flexbox property. Here
is the link.
* {box-sizing: border-box}
body {margin: 0}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
display: block;
width: 100%;
margin-top: 8px;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/w3images/wedding.jpg" alt="">
<img src="https://www.w3schools.com/w3images/rocks.jpg" alt="">
<img src="https://www.w3schools.com/w3images/falls2.jpg" alt="">
<img src="https://www.w3schools.com/w3images/paris.jpg" alt="">
<img src="https://www.w3schools.com/w3images/nature.jpg" alt="">
<img src="https://www.w3schools.com/w3images/mist.jpg" alt="">
<img src="https://www.w3schools.com/w3images/paris.jpg" alt="">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/underwater.jpg" alt="">
<img src="https://www.w3schools.com/w3images/ocean.jpg" alt="">
<img src="https://www.w3schools.com/w3images/wedding.jpg" alt="">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg" alt="">
<img src="https://www.w3schools.com/w3images/rocks.jpg" alt="">
<img src="https://www.w3schools.com/w3images/underwater.jpg" alt="">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/wedding.jpg" alt="">
<img src="https://www.w3schools.com/w3images/rocks.jpg" alt="">
<img src="https://www.w3schools.com/w3images/falls2.jpg" alt="">
<img src="https://www.w3schools.com/w3images/paris.jpg" alt="">
<img src="https://www.w3schools.com/w3images/nature.jpg" alt="">
<img src="https://www.w3schools.com/w3images/mist.jpg" alt="">
<img src="https://www.w3schools.com/w3images/paris.jpg" alt="">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/underwater.jpg" alt="">
<img src="https://www.w3schools.com/w3images/ocean.jpg" alt="">
<img src="https://www.w3schools.com/w3images/wedding.jpg" alt="">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg" alt="">
<img src="https://www.w3schools.com/w3images/rocks.jpg" alt="">
<img src="https://www.w3schools.com/w3images/underwater.jpg" alt="">
</div>
</div>
I realized my website is not working on safari (desktop and mobile). For some reason the images are not responsive. I used a Bootstrap theme, the website is simple. Please help!
website: www.scanek.com
HTML:
<section id="portfolio" class="pfblock">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<h2 class="pfblock-title">Categories</h2>
<div class="pfblock-subtitle">
</div>
</div>
</div>
</div><!-- .row -->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="grid wow zoomIn">
<a href="categories/kitchen/index.html">
<figure class="effect-bubba">
<img src="assets/images/kitchens.jpg" alt="img01" class="img-responsive" />
<figcaption>
<h2> <span>Kitchens</span></h2>
<p></p>
</figcaption>
</figure>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="grid wow zoomIn">
<a href="categories/bathroom//bathroom1/index.html">
<figure class="effect-bubba">
<img src="assets/images/bathrooms.jpg" alt="img01"/>
<figcaption>
<h2> <span>Bathrooms</span></h2>
<p></p>
</figcaption>
</figure>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="grid wow zoomIn">
<a href="categories/fixtures/index.html">
<figure class="effect-bubba">
<img src="assets/images/fixtures.jpg" alt="img01"/>
<figcaption>
<h2>House<span> Fixtures</span></h2>
<p></p>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
</div><!-- .container -->
</section>
CSS:
img {
max-width: 100%;
width: 100%;
height: auto;
}
.grid figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
}
figure.effect-bubba img {
opacity: 0.75;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
Your css syntaks on link that you provide to us is not right, for the start,
you have:
img {
max-width: 100% width :100% height: auto;
}
try with :
img {
max-width: 100%;
width :100%;
height: auto;
}
after yo fix this issues, then if problem is still there we can try to help you..
In addiion to the CSS typo on img width(should be width: 100%;), you had .img-reponsive only on one image set.
Set .img-responsive on all images.
Check resizing on following fiddle: https://jsfiddle.net/Syden/5mfvj9v2/20/
Snippet below:
img {
max-width: 100%;
width: 100%;
height: auto;
}
.grid figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
}
figure.effect-bubba img {
opacity: 0.75;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
<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/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="portfolio" class="pfblock">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<h2 class="pfblock-title">Categories</h2>
<div class="pfblock-subtitle">
</div>
</div>
</div>
</div>
<!-- .row -->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="grid wow zoomIn">
<a href="categories/kitchen/index.html">
<figure class="effect-bubba">
<img src="https://placehold.it/200x500" alt="img01" class="img-responsive" />
<figcaption>
<h2> <span>Kitchens</span></h2>
<p></p>
</figcaption>
</figure>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="grid wow zoomIn">
<a href="categories/bathroom//bathroom1/index.html">
<figure class="effect-bubba">
<img src="https://placehold.it/200x500" alt="img01" class="img-responsive" />
<figcaption>
<h2> <span>Bathrooms</span></h2>
<p></p>
</figcaption>
</figure>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="grid wow zoomIn">
<a href="categories/fixtures/index.html">
<figure class="effect-bubba">
<img src="https://placehold.it/200x500" alt="img01" class="img-responsive" />
<figcaption>
<h2>House<span> Fixtures</span></h2>
<p></p>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
</div>
<!-- .container -->
</section>
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
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>
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.
I have a image gallery which is not straighting/fullfilling the full width in a row
html
<div class="col-md-6">
<figure class="gallery">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
</figure>
</div>
css
.gallery{
display:table;
}
.gallery img{
display: inline-block;
padding: 2px;
background: transparent;
}
display:table-cell is also not working . There is 6 images here
.gallery{
display:table;
white-space: nowrap;
}
.gallery img{
display: inline-block;
padding: 2px;
background: transparent;
}
<div class="col-md-6">
<figure class="gallery">
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
</figure>
</div>
From what I understood (since you have not mentioned the image size.)
.gallery{
}
.gallery > div{
padding:2px;
}
.gallery img{
background: transparent;
width:100%;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="gallery row">
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
</div>
</div>
Add Below css
.gallery{
display:table;
margin:0;
}
DEMO