Help Please.. Gallery format help

[donaldbren]

Hi There,


I appreciate any help any one can offer..

The website in question is www.tapasbar[dot]co [dot]uk

I have added a responsive image gallery yet im struggling to get the gallery layout to change.

The code for the gallery is:


<!-- gallery -->
<div class="gallery">
<div class="container">
<h3 class="animated wow zoomIn" data-wow-delay=".5s"></h3>
<p class="qui animated wow zoomIn" data-wow-delay=".5s"> </p>
<div class="gallery-grids">
<div class="gallery-grids1">
<div class="gallery-grid animated wow slideInUp" data-wow-delay=".5s">
<a href="https://internetlifeforum.com/images/4.jpg" class="big">
<img src="https://internetlifeforum.com/images/4.jpg" alt=" " title="" class="img-responsive" />
<div class="textbox">
<h4></h4>
<p> </p>
</div>
</a>
</div>
<div class="gallery-grid-left animated wow slideInUp" data-wow-delay=".5s">
<a href="https://internetlifeforum.com/images/5.jpg" class="big">
<img src="https://internetlifeforum.com/images/5.jpg" alt=" " title="" class="img-responsive" />
<div class="textbox textbox1">
<p></p>
</div>
</a>
</div>
<div class="gallery-grid-left animated wow slideInUp" data-wow-delay=".5s">
<a href="https://internetlifeforum.com/images/6.jpg" class="big">
<img src="https://internetlifeforum.com/images/6.jpg" alt=" " title="" class="img-responsive" />
<div class="textbox textbox1">
<h4>Gallery</h4>
<p></p>
</div>
</a>
</div>
<div class="gallery-grid-left animated wow slideInUp" data-wow-delay=".5s">
<a href="https://internetlifeforum.com/images/7.jpg" class="big">
<img src="https://internetlifeforum.com/images/7.jpg" alt=" "" class="img-responsive" />
<div class="textbox textbox1">
<h4>Gallery</h4>
<p></p>
</div>
</a>
</div>
<div class="clearfix"> </div>
</div>
<div class="gallery-grids1">
<div class="gallery-grid-left animated wow slideInUp" data-wow-delay=".5s">
<a href="https://internetlifeforum.com/images/8.jpg" class="big">
<img src="https://internetlifeforum.com/images/8.jpg" alt=" " title=" " class="img-responsive" />
<div class="textbox textbox1">
<h4>Gallery</h4>
<p> </p>
</div>
</a>
</div>
<div class="gallery-grid-left animated wow slideInUp" data-wow-delay=".5s">
<a href="https://internetlifeforum.com/images/9.jpg" class="big">
<img src="https://internetlifeforum.com/images/9.jpg" alt=" " title=" " class="img-responsive" />
<div class="textbox textbox1">
<h4>Gallery</h4>
<p> </p>
</div>
</a>
</div>
<div class="gallery-grid animated wow slideInUp" data-wow-delay=".5s">
<a href="https://internetlifeforum.com/images/11.jpg" class="big">
<img src="https://internetlifeforum.com/images/11.jpg" alt=" " title=" " class="img-responsive" />
<div class="textbox">
<h4>Gallery</h4>
<p> </p>
</div>
</a>
</div>
<div class="gallery-grid-left animated wow slideInUp" data-wow-delay=".5s">
<a href="https://internetlifeforum.com/images/10.jpg" class="big">
<img src="https://internetlifeforum.com/images/10.jpg" alt=" " title=" " class="img-responsive" />
<div class="textbox textbox1">
<h4>Gallery</h4>
<p> </p>
</div>
</a>
</div>
<div class="clearfix"> </div>
</div>
<div class="gallery-grids1">
<div class="gallery-grid-left animated wow slideInUp" data-wow-delay=".5s">
<a href="https://internetlifeforum.com/images/5.jpg" class="big">
<img src="https://internetlifeforum.com/images/5.jpg" alt=" " title=" " class="img-responsive" />
<div class="textbox textbox1">
<h4>Gallery</h4>
<p> </p>
</div>
</a>
</div>
<div class="gallery-grid animated wow slideInUp" data-wow-delay=".5s">
<a href="https://internetlifeforum.com/images/12.jpg" class="big">
<img src="https://internetlifeforum.com/images/12.jpg" alt=" " title=" " class="img-responsive" />
<div class="textbox">
<h4>Gallery</h4>
<p> </p>
</div>
</a>
</div>
<div class="gallery-grid-left animated wow slideInUp" data-wow-delay=".5s">
<a href="https://internetlifeforum.com/images/9.jpg" class="big">
<img src="https://internetlifeforum.com/images/9.jpg" alt=" " title=" " class="img-responsive" />
<div class="textbox textbox1">
<h4>Gallery</h4>
<p> </p>
</div>
</a>
</div>
<div class="gallery-grid-left animated wow slideInUp" data-wow-delay=".5s">
<a href="https://internetlifeforum.com/images/8.jpg" class="big">
<img src="https://internetlifeforum.com/images/8.jpg" alt=" " title=" " class="img-responsive" />
<div class="textbox textbox1">
<h4>Gallery</h4>
<p> </p>
</div>
</a>
</div>
<div class="clearfix"> </div>
</div>
</div>
<script type="text/javascript" src="js/simple-lightbox.min.js"></script>
<script>
$(function(){
var gallery = $('.gallery a').simpleLightbox({navText: ['&lsaquo;','&rsaquo;']});
});
</script>
</div>
</div>
<!-- //gallery -->


Currently the images load as a very mishaped column. I would like the images to order them selves in to a grid formation or something just cleaner and more organised.

Thanks in advance.