Space between images grows on browser shrink

Question

I have some images which get smaller as the browser size does. It works well for me but as the images get smaller the space between them gets bigger. When the browser is at its smallest, the space between images is the size of the image.

If you resize your browser slowly down to the smallest you will see the media queries kick in and see what i mean.

Ive tried that many things ive lost track.

Ive tried replicating it in a fiddle but it just requires most of my code to do so, so i can only offer the link to the page http://www.techagesite.com/page-1work1112211.htm

.top_grow{

        display:inline-block;
        vertical-align:top;
        font-size:0;
        margin:0 auto;
        overflow:hidden;
         white-space:nowrap;
    }


.cats {width:100%;
height:100%;
display:block;
font-size:0;
}

               .text{
        font-size:11px;
        letter-spacing:1px;
        word-spacing:1px;
    }



        <div class="top_grow">
            <a href="http://www.techagesite.com/hd-wii-wallpapers-mario-kart-super-mario-galaxy-2.htm">
                <img class="cats" src="http://freephonewallpapersformobile.files.wordpress.com/2014/05/super-mario-galaxy-hd-desktop-background_small1.jpg"></img>
                <div class="text">
                    Mario Galaxy
                </div>
            </a>
        </div>

You can also try using ' ' in the top of your code. It may require you to recode everything to manage the layout, but HTML 5 may offer much more stability. Also, if you want to use Bootstrap framework, it can help out in the layout to automatically flex your images both in Mobile and other browsers. Don't forget to use viewport settings to comply with mobile devices: — Franz Noel, May 19 '14 at 06:59

score 1 · Accepted Answer · answered May 19 '14 at 08:07

1

It looks as though your images are being spaced out with a space character. The space character does not have a fluid width.

The solution would be to use floats.

Something like

.holder {
    width: 100%;
}

.img-holder {
    float: left;
    margin-right: 3%;
    width: 22%;
    height: 100px;
    background-color: #ccc;
}

img {
    width: 100%;
    height: auto;
}

 <div class="holder">
     <div class="img-holder"><img src="#" /></div>
     <div class="img-holder"><img src="#" /></div>
     <div class="img-holder"><img src="#" /></div>
     <div class="img-holder"><img src="#" /></div>
 </div>

This will give you four columns of images with a variable width gutter.

You will need to alter this to suit your own purposes, but I hope this sends you in the right direction.

Try it out in a new file first, then apply what you learn to your specific issue and this should work fine.

answered May 19 '14 at 08:07

OrderAndChaos

3,061
1
20
45

Please also note that the img tag is self closing. http://stackoverflow.com/questions/14860492/how-to-close-img-tag-properly – OrderAndChaos May 19 '14 at 08:09
Thanks il give it a go and get back to you on it – Techagesite May 19 '14 at 11:17
Great, let me know how it goes. – OrderAndChaos May 19 '14 at 11:26
i thought they were shrinking but they were just overlapping on browser resize – Techagesite May 19 '14 at 12:52
could it be because im using 6 images instead of 4? – Techagesite May 19 '14 at 12:53
ok gap was percentage based all good. are the images meant to shrink on browser resize without media queries or do i need to add them? – Techagesite May 19 '14 at 12:59
The example I gave should be completely fluid, however it will all depend on where you put the code. The holder will be 100% of the parent elements width, so if the parent element is static you will need to use media queries to change it's width. – OrderAndChaos May 19 '14 at 13:43
You would need to change the .img-holder width to accommodate for different numbers of columns. For example you might use width: 31% with margin: 2.333% for three columns. You need to work this out to suit. – OrderAndChaos May 19 '14 at 13:49
Got it working was an issue with a typo. Been trying to fix those images for a month :). Cheers – Techagesite May 19 '14 at 14:04
1

No problem. Good luck with the rest of the site. – OrderAndChaos May 19 '14 at 14:06

Space between images grows on browser shrink

1 Answers1