Not responsive

[mannte]

The images only get smaller and smaller.
I fixed this by changing the width of the images to 220px for big screens and 140px for small screens instead of a percentage. Furthermore I centerend everything.

This is the part of the css file I changed:
.gridder {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center
}
.gridder-list {
display: inline-block;
vertical-align: top;
width: 220px
}
@media screen and (max-width: 862px) {
.gridder-list {
width: 140px;
}
}
.gridder-show {
display: block;
text-align: left;
float: left;
width: 100%;
position: relative;
background: #EEE url("../images/loading-spin.svg") no-repeat center
}

[orion3dgames]

I've not really focused on the css, as they are so many different way's this could be used.

If the image get's smaller and smaller, then you have a width % on the .gridder-list. Make sure your css is not being overwritten by other css, or be more specific: try doing this for example :

.gridder .gridder-list{
width: 220px;
}
@media screen and (max-width: 862px) {
.gridder .gridder-list {
width: 140px;
}
}

else send me a link so I can debug it.

Cheers, Orion

[mannte]

It was like that in the standard css file, but it's indeed better the way you write it.
I have an other question: is it possible to scroll to and open an specific item, for example with jquery?

[orion3dgames]

You can use something like this to trigger an opening :
var id = 7;
$(".gridder .gridder-list:nth-child(id)").trigger("click");

[orion3dgames]

I'll close this as it is CSS related. There are many place all over internet explaining how to make HTML responsive. :)

[tparikka]

I used this gridder for my personal portfolio project, and I modified it slightly to be responsive and work with Bootstrap. Would it be worthwhile to clean up the code a bit and submit a pull request? Not sure how this works, I'm just now starting to get into development myself.