search

codrops / ThumbnailGridExpandingPreview

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
360 stars 143 forks source link

Width of og-expander not the same as the grid #10

Closed Parcye closed 10 years ago

Parcye commented 10 years ago

Hi,

I am using a bootstrap template and want to use this plugin for showing extra info on products. I have got it working in the basics, but the og-expander never reaches 100% of the width of the items parent item.

I have tried with my thumbnail code based on div contianer with children div's and with an UL / LI sample code as in the sample, both without success.

How can I get the og-expander to be 100% of the items parent width.

Parcye commented 10 years ago

Added the following to the .og-grid : letter-spacing: -.31em; word-spacing: -.43em;

This is needed to have the .col* children fit within 100% with display: inline-block , http://stackoverflow.com/questions/15653017/3-inline-block-divs-with-exactly-33-width-not-fitting-in-parent

Added the following to the .col-* within the .og-grid float: none; position: static; display: inline-block; letter-spacing: normal; word-spacing: normal;

This is needed to disable the floating and fix the letter and wordspacing .