why is my list item thumbs displaying like this?

Question

hey i have set some breakpoints and ive set list item in percentage and it fits well in different breakpoints.

but my default one which i haven't set is displayed like this.

here is my sass code.

li
        {


            width:20%;
            padding: 2px;
            float:left;
                          @include media($xl-desktop) { // As defined in _grid-settings.scss
                            width:10%;
                          }

                          @include media($mobile) { // As defined in _grid-settings.scss
                            width:33.3333%;
                          }
                        }

Please tell me where am i doing it wrong. thanks. Here is my Demo Demo Link

Answer 1

can you try this layout? to make images responsive you need to add width: 100% (you did the exact oppsite);

Make an image responsive - simplest way

http://jsfiddle.net/95EfW/

css:

    ul{
    list-style: none;
}

li{
    float: left;
    padding:0;
    margin:0;
    width: 20%;
    padding: 4px;
}

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

thanks for the demo, it helps. So here is the issue, the issue is each of your image is different size, hence when you float left it brings the remaining pictures down in different screens. To fix the issue, you have two methods, using inline-block (rather than float on li) or setting a static height for different size screens. here is a small demo for setting heights jsfiddle.net/f5cgT/2 – ravitadi 1 hour ago

Answer 2

This will prevent the floats to drop as you clear each row.

.galleryList li:nth-child(6n+6) {
  clear: left;
}

But the images original size should be the same 500px x 750px as well. Than you would not have the gaps in the first place...