[Question] Using the hexagrid in a div about responsive-grid-of-hexagons HOT 9 CLOSED

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?

from responsive-grid-of-hexagons.

@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 */)

from responsive-grid-of-hexagons.

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!

from responsive-grid-of-hexagons.

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

from responsive-grid-of-hexagons.

The repo CSS results in this:

In safari and firefox

from responsive-grid-of-hexagons.

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

from responsive-grid-of-hexagons.

@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?

from responsive-grid-of-hexagons.

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

from responsive-grid-of-hexagons.

No problem.

from responsive-grid-of-hexagons.