search

councilforeconed / interactive-activities

Council for Economic Education
http://interactives.councilforeconed.org
Mozilla Public License 2.0
6 stars 2 forks source link

Multiline titles causing layout bugs #70

Closed stevekinney closed 10 years ago

stevekinney commented 10 years ago

@ZeeJab I noticed a little bug. If a row has a two or three line title in it and the next one does not, it messes up the flow of icons. The long title pushes down the start of the row. I noticed this earlier, but the way it broke actually looked pretty good. Now that I'm beginning to add more icons though, it's not so pretty.

Any suggestions?

Pics or it didn't happen.

screen shot 2014-06-10 at 4 04 56 pm screen shot 2014-06-10 at 4 04 59 pm screen shot 2014-06-10 at 4 05 30 pm

stevekinney commented 10 years ago

You read my mind!

Sent from my iPhone

On Jun 10, 2014, at 5:59 PM, Zahra Jabini notifications@github.com wrote:

we can add the masonry.js library which is prefect for these types of situations and super easy to use... or give all the divs a fixed height, which could get ugly later

— Reply to this email directly or view it on GitHub.

stevekinney commented 10 years ago

So, the issue with my overlapping activities was that the images hadn't loaded yet. With a little Dev Tools magic I fired off the event after the page had loaded and it looked something like this.

screen shot 2014-06-12 at 11 23 16 am

It's kind of a variation on the existing issue above.

Do you think we should keep going down this road, @ZeeJab? Or should we maybe just try handle it in—gasp—CSS? (I'm thinking about setting some sensible min-height statements for each size.

Let me know what you think.

stevekinney commented 10 years ago

My hack—which is currently live in production—seems to be working for now (there are some widths where it is a little ugly, but none that are completely broken (in Chrome, at least). Eventually, we should figure out a better implementation, but for now, I want to close this issue. :smile_cat: