Help Please.. Gallery format help

Hi There,

I appreciate any help any one can offer..

The website in question is www.tapasbar.co.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="images/4.jpg" class="big">
<img src="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="images/5.jpg" class="big">
<img src="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="images/6.jpg" class="big">
<img src="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="images/7.jpg" class="big">
<img src="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="images/8.jpg" class="big">
<img src="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="images/9.jpg" class="big">
<img src="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="images/11.jpg" class="big">
<img src="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="images/10.jpg" class="big">
<img src="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="images/5.jpg" class="big">
<img src="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="images/12.jpg" class="big">
<img src="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="images/9.jpg" class="big">
<img src="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="images/8.jpg" class="big">
<img src="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.

 

Well, the empty headings, empty paragraphs, endless pointless DIV for nothing, data attributes indicatiing scripttardery doing CSS' job, anchors wrapping things that don't belong inside inline-level tags if you want consistent formatting, presentational use of bloated classes, clearfix like it's still 2003... well...

Pretty much means your markup is trash -- of course we can't tell you anything about what might be going wrong with your styling without seeing the full scripttardery and style being applied.

Though the indicators are you've saddled yourself with off the shelf framework asshattery that means my advice would be to pitch the entire SITE in the trash to start over using semantic markup properly without the dumbass ignorant frame BS pissing all over it.

Sorry if that seems harsh, but the truth often is. That you're even down to H4 -- with no apparent CONTENT for them to indicate the start of a subsection of -- says that pretty clearly to my mind.

I'd have to see the actual images and content live before I could even TRY to tell you what the proper markup and CSS would be... and any scripting would be there to enhance the functionality... something that particular lightbox implementation looks like it pisses on from so on-high you'd think the almighty just got back from a kegger.

 

Give us a link or CSS code at least as well

 

Contact me I might help you.