[Question] Using the hexagrid in a div

[MinThaMie]

I'm using your grid as follows:

<div id="honeycomb"><ul id="hexGrid"></ul></div>

and then dynamically append the list items with jquery like this: $("#hexGrid").append('<li class="hex"><a class="hexIn" href="#"><img src=' + data[i].photo + ' alt="" />' + '<h1>' + data[i].employee_id + '</h1><p></p></a></li>');

And even though the parent div is larger the hexGrid does not stretch as nicely as in your examples. I did not change any code and took the code from this codepen: https://codepen.io/web-tiki/pen/wWGeEM

Hopefully one of you can help me to figure this out, because it looks not so nice now :(

[poi33]

I created this example: https://jsfiddle.net/w1o7kzow/2/
And there does not seem to be anything wrong with the code.
Maybe there is some css that affects the "honeycomb" id?

[web-tiki]

@MinThaMie the behaviour you see is the normal behaviour. If you stretch width of the result window in the codepen, you will see that the grid adjusts to 2-3 hexagons per row. As you only have 4, and the fifth one is missing, it looks like the grid isn't centered.

I suppose (you haven't explained what you want) that you want the grid to always display 1-2 hexagons per row. For this, you just need to modify the CSS:

• move the content of the second media query out of it (@media (max-width: 1200px) { /* <- 4-3 hexagons per row */)
• delete the second media query with all it's content (@media (min-width:1201px) { /* <- 2-3 hexagons per row */)

[MinThaMie]

Thanks for the answers, for some reason the extra div broke the height of the <ul>. Thanks for the quick response :) I love this repo!

[web-tiki]

On a side note, you should use the CSS from the repo rather than the one on Codepen as it isn't maintained there.

[MinThaMie]

The repo CSS results in this:

In safari and firefox

[poi33]

@web-tiki did we ever test the grid in safari?
Are there some -prefixes we are missing?

[web-tiki]

@poi33 the grid has been successfully tested on safari and firefox and no prefixes are missing.
@MinThaMie have you tested the repo demo here? And what versions on firefox and safari have you seen that result on?

[MinThaMie]

I'm really sorry. I managed to forget one crucial class :(

[web-tiki]

No problem.