CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
SF Developer
SF Developer

Reputation: 5394

BootStrap images sometimes overlapping

I'm having a problem with CSS Bootstrap on images that overlap on each others. The problem is also that sometimes it happens, sometimes it doesn't so it's very inconsistent.

I also noticed that if I click on F12 Dev tools, the images automatically get spaced properly. I tried refreshing the cache pressing CTRL+F5 but the problem remains.

This is the website http://www.sdhealthy.com/productssnacks.html and this is a sample of images overlapping (picture).

Anybody can please point me to what's wrong on the CSS code??

Upvotes: 1

Views: 485

Answers (1)

Gavin
Gavin

Reputation: 2153

I've had a look through your code and you are using the isotope jquery plugin to position and animate the divs with 'isotope-item class'.

I suspect that you need to add this part of your jquery... 

$(".isotope-w").isotope({
itemSelector: '.item',
layoutMode: 'fitRows'
});

to a $(document).ready function.

This is because the isotope plugin is calculating heights of the divs before the images have finished downloading.

A "workaround" would be to manually add the height attribute to each of the images but I woould try and correct your jquery.

Firebug is also reporting an error:

ReferenceError: $ is not defined: $(document).ready(function () {
http://www.sdhealthy.com/productssnacks.html
Line 29

If your isotope code is already supposed to run on document ready, this error will prevent it from running.

Upvotes: 2

Related Questions