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

I'm Green Please Forgive Me #35

Closed GrantMossman closed 8 years ago

GrantMossman commented 8 years ago

I'm quite new to JS. I am in school for it right now so I'm still learning. I am trying to use the gridder for my portfolio site which is mostly HTML and CSS with just a few JS features. I'm trying to use it in my Portfolio section. It's set up in a 3 element wide grid. Each element in the list is 33.3333% wide and looks just how I want it.

I have two main issues I cannot solve. First, when I click on the either of the left two list items in each row they cause the rest in the row to bump down to the next row. I cant figure out why.

And the next problem is after the sixth list item there is a gap created as if there is a invisible 7th list item even though the 7th is in the place where the 8th should go.

If any of this rambling makes sense and you can help that would be awesome.

orion3dgames commented 8 years ago

Hello, please make sure your css is correct.

.gridder-list { display: inline-block; }

.gridder-show { float: left; display: block; }

These styles are mandatory... and using the above css correctly, it should solve you first problem.

The other problem is weird, I would need to see it in action to debug it, can I view your test online somewhere?

Regards, Orion

GrantMossman commented 8 years ago

[Link Removed]

heres a link to my google drive folder with all my files. The site isn't live so this is the easiest way to get it to you.

Sorry if its not super organized.

On Wed, Dec 9, 2015 at 4:38 PM, Orion Gunning notifications@github.com wrote:

Hello, please make sure your css is correct.

.gridder-list { display: inline-block; }

.gridder-show { float: left; display: block; }

These styles are mandatory... and making the above a applied correctly, it should solve you first problem.

The other one is weird, I would need to see it in action to debug it, can I view your test online somewhere?

Regards, Orion

— Reply to this email directly or view it on GitHub https://github.com/oriongunning/gridder/issues/35#issuecomment-163401212 .

orion3dgames commented 8 years ago

in you main.css line 132, you need to remove the float:left; that's what's making your first problem. the other one is due to your images not having the same dimensions. just recrop them at the exact same size in pixel WxH and you will be fine.

GrantMossman commented 8 years ago

Got it all solved! Thanks!