You are using an old bootstrap version which uses floats so you would need to explicitly set the columns as required using the col classes.
For 3 across at greater than 768px you use the col-sm-4 class but for smaller than that you would need to set the xs class (col-xs-6) to span 6 of the implied 12 columns (e.g 2 per row).
However its not as simple as that in bootstrap3 because floats will snag if they are not exactly the same height so after every second div (the one that now has 2 classes - col-xs-6 col-sm-4) you would need to add the clear div as mentioned in the documentation.
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
That clear element becomes visible at smaller screen sizes and clears the floats above so that they don’t snag.
Bootstrap only has its lower breakpoint at 768px so if you wanted to go smaller than that to go from 2 column to one column you would need to write your own css at the breakpoint you want.
e.g.
@media screen and (max-width:520px){
.room-list .col-xs-6{width:100%;clear:both;}
}
That’s the problem with frameworks and you must understand fully how they work or they just run away with you.
This is obviously a design flaw in your isotope js code as it seems to only work properly on resize and a hard refresh. I would post a comment to the author for a fix or check the faq as it mentions overlapping elements when images are not loaded.
OFF TOPIC:
You have to be careful with these large frameworks and JS grid effects as they turn something simple into something very complicated and unstable. You may get a cool effect eventually but likely at the cost of a janky layout that will probably mostly annoy someone trying to get information from your site. It’s very difficult to do things like this nicely without some sort of accessibility issues.
Thanks for that. We are definitely heading in the right direction now. It drops down now to two columns, as you drag the screen in, then down to one. It even shows as two columns on landscape on the phone, where it was full size and slightly blurry as the image was stretched. I put the <div class="clearfix visible-xs-block"></div> after each type of accommodation (each 3 images), not after each image. Initially I put it after the last of the 3 images, then I moved it to after the text associated with each group. Anyway, have another look and see what you think now.
Cheers,
It needs to go after every pair of images or the third image will snag on the second one as it does on my iPhone.
You also need to go to one column for small mobiles as my iphone5 is showing 2 squashed columns (unless I’m looking at a cached version as mobile sometimes doesn’t refresh easily).
I’m away this week so don’t have access to a computer to check the code unfortunately.
Hello Paul, Thanks for that. I have now put the <div class="clearfix visible-xs-block"></div> after each second lot of images and also after the last image text in each 3 image block. It appears OK until you do a refresh (after dragging browser window in to 2 or 1 image showing) then some (not all) will jump over some text. Drag slightly out again, then in and all OK again. So maybe there is still something not quite right.
Cheers,
Did you check the faq and add the images loaded plugin?
It specifically mentions overlapping content if the images have not fully loaded.
Also check the documentation for how to implement with bootstrap.
It looks very shaky to me and doesn’t seem to conform to the bootstrap guidelines.
I notice in your demo that the clearfix divs get turned into isotope items and absolutely placed thus killing the clearfix effect, But then of course the isotope items are all absolutely placed which is why the layout is so fragile as it relies on fixed heights coming from the js to hold the page together.
To improve on what you have now I think you will need to go right back to the documentation and build from square one using the layout recommended in the documentation.
Hi Paul,
I think I am out of my depth to go any further! I have read all that documentation but really just got lost.This was built from a template which the owner liked (I then used it on two others as well) so it is as it was, just filled in all the images and text etc. So, I guess it is a case of living with it now (it is far better than when we started) The problem mainly seems to manifest itself if you do a refresh, which I guess the average person wouldn’t - why would you in normal circumstances? As you say, it is a bit fragile, but from what I can see is much better than we originally had with all your help.
Cheers.
