search

orion3dgames / gridder

A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.
http://orion3dgames.github.io/gridder/
461 stars 130 forks source link

Not responsive #38

Closed mannte closed 8 years ago

mannte commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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

orion3dgames commented 8 years ago

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

tparikka commented 8 years ago

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.