Closed mannte closed 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
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?
You can use something like this to trigger an opening : var id = 7; $(".gridder .gridder-list:nth-child(id)").trigger("click");
I'll close this as it is CSS related. There are many place all over internet explaining how to make HTML responsive. :)
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.
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 }