Grid Layout Lost

HTML & CSS
1

Hi From medieval York UK :slight_smile:

My battle to get a consistent home page griod layout continues :frowning: With thanks to suggestions from site point members i got rid of a FF bug which hid the homepage images. This was achived by removing this snippet of illustrated Javascript code:
http://i216.photobucket.com/albums/cc53/zymurgy_bucket/napalm-code-suggestion-2_zps8e48b47e.jpg

But this has indroduced a minor problem Yes the images always display on the home page but a gate a broken picture layout as in:
http://i216.photobucket.com/albums/cc53/zymurgy_bucket/broken-grid-2_zps29ca466f.jpg

What i need is the layout to always appear grid line as in:
http://i216.photobucket.com/albums/cc53/zymurgy_bucket/correct-grid_zps55abd5aa.jpg

Please bare in mind I am tinkering with code I paid for (No I cant get back to the original designer) so my knowledge isnt brilliant :frowning:

So is there a CSS solution to keep the pics in a grid structure on the home page rather than creating whitespace?

Any insights welcome,
Thanks,
David

2

Hi,

Wasn’t the code you removed the fix I gave you to make the layout behave and as mentioned in the site that you got the script from?

I’m sure I had that working fully locally with the fixes I gave.

You’ll have to give me a link to the page again and I’ll look at it tomorrow :slight_smile:

3

Hi paul…

The page in question is www.davidclick.com . Yes whils that Javascript code did getthe grid layout consistent a FF bug got introduced in that dosplay:none was being added to the source code. :frowning:

The situation now is no firefox bug but layout gappy with white space, oh dear…

Thanks,
David

4

HI,

If the page works with the scrpt in place and then occasionally you are getting a display:none added then how about trying to force the image to always be display:block.

e.g. Original script.


<script>
$(function() {    var $container 	= $('#am-container'),
        $imgs		= $container.find('img').hide(),
        totalImgs	= $imgs.length,
        cnt			= 0;
 
    $imgs.each(function(i) {
        var $img	= $(this);
        $('<img/>').load(function() {
            ++cnt;
            if( cnt === totalImgs ) {
                $imgs.show();
                $container.montage();
            }
        }).attr('src',$img.attr('src'));
    });	
 
});

</script>

Extra CSS:



.galWrap img{display:block!important}

I have no idea if this will make any difference but adding the script fixes the display issue immediately for me locally but I can’t reproduce your whole site to test :slight_smile:

I’m sure the answer is in the script rather than css but try what I suggest and see what happens.

5

Thanks Paul,
I"ll give this fix a whirl tomorrow :slight_smile:

6

Thank You Paul your solution fixed a problem that was totally stressing me out. You generosity for taking time out to fix this is very much appreciated :slight_smile:

7

Glad it worked :slight_smile: I’ll keep my fingers crossed.