0

I'm attempting to get my Bootstrap portfolio image gallery to show 4 images at full size, less at tablet size and one at mobile phone size. I've worked on this for two days now (yes, I'm a newbie), and I cannot get the problem resolved. The gallery originally came using filters (Bootstrap, Wordpress, HTML etc), but I removed them in order to get a stacked gallery on mobile. As far as I can tell, the answer is in the UL class in the following code:

<section id="portfolio" class="container">
    <ul class="portfolio-items col-4">
        <li class="portfolio-item">
            <div class="item-inner">
                <img src="images/portfolio/thumb/item1.jpg" alt="">
                <h5>Coble & Associates</h5>
                <div class="overlay">
                <a class="preview btn btn-danger" href="http://www.cobleandassociates.com/" target="_blank"prettyPhoto"><i class="icon-link"></i></a>             
                    <a class="preview btn btn-danger" href="images/portfolio/full/item1.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>             
                </div>

I can set the gallery to any many columns as I want by simply changing col-4 to column-6 etc, but whatever I change it to, that's how many columns I get at mobile size. I was told that I can use the code as something like col-sm-1 col-lg-4, and this does give me a single column at mobile size, however, it also gives me a single column at full browser size.

I've tried every combination there is, but it's just not working. Can anyone point me in the right direction, and do you need to see my CSS files? You can view the source code from my live site at http://www.prodesignnc.com/portfolio.html and any help on this would be greatly appreciated. Thank you. David

Edit

<section id="portfolio" class="container">
    <ul class="portfolio-items row">
 <li class="portfolio-item col-lg-4 col-md-6 col-sm-12">
         <div class="item-inner">

                <img src="images/portfolio/thumb/item1.jpg" alt="">
                <h5>Coble & Associates</h5>
                <div class="overlay">
                <a class="preview btn btn-danger" href="http://www.cobleandassociates.com/" target="_blank"prettyPhoto"><i class="icon-link"></i></a>             
                    <a class="preview btn btn-danger" href="images/portfolio/full/item1.jpg"  rel="prettyPhoto"><i class="icon-eye-open"></i></a>             
                </div>           
          </div>           
        </li><!--/.portfolio-item-->
        <li class="portfolio-item">
            <div class="item-inner">
                <img src="images/portfolio/thumb/item2.jpg" alt="">
                <h5>Herring & Mills</h5>
                <div class="overlay">
                    <a class="preview btn btn-danger" href="images/portfolio/full/item2.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>              
                </div>           
            </div>           
        </li><!--/.portfolio-item-->
        <li class="portfolio-item">
            <div class="item-inner">
                <img src="images/portfolio/thumb/item3.jpg" alt="">
                <h5>YCL Project</h5>
                <div class="overlay">
                    <a class="preview btn btn-danger" href="images/portfolio/full/item3.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>        
                </div>           
            </div>           
        </li><!--/.portfolio-item-->
        <li class="portfolio-item">
            <div class="item-inner">
                <img src="images/portfolio/thumb/item8.jpg" alt="">
                <h5>National Coaches Day</h5>
                <div class="overlay">
                    <a class="preview btn btn-danger" href="images/portfolio/full/item8.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>          
                </div>           
            </div>           
        </li><!--/.portfolio-item-->
Daveontrak
  • 69
  • 4

2 Answers2

1

I believe your ul needs to have the class of "row" and then add your column classes to each li. Try something like this:

<ul class="portfolio-items row">
     <li class="portfolio-item col-lg-4 col-md-6 col-sm-12">

col-lg-4 is for 3 columns on large displays, col-md-6 is for 2 columns on medium displays, and col-sm-12 is for 1 column on small displays

Allen Blair
  • 36
  • 3
0

Each portfolio item should be a col-* and the portfolio-items should be a row..

Demo: http://www.bootply.com/render/IuF5rpPzOy

Code: http://www.bootply.com/IuF5rpPzOy

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Skelly, That works so perfectly that I could kiss you square on the lips :-) I do have one more small issue though that's got me completely puzzled. The thumbs are all exactly the same size, but for some reason, the very first one displays at a slightly different size and it has my full page layout messed up a bit. Anything come to mind on that? – Daveontrak Jan 07 '15 at 17:03
  • 1
    Fixed. I think there was a larger image on the server that didn't get overwritten when I upload the new page. All is good in the world today! – Daveontrak Jan 07 '15 at 17:32