How to add more padding between hexagons without losing responsiveness?

Question

I'm working on a personal website where I want to show hexagonal images/tiles on front page. I found a solution here for responsive hexagon html and css blocks.Now I want to add more padding between these hexagons without losing responsiveness.

I'd tried adding padding but it destroy overall responsiveness.

This is the original code I found here.

I want more padding between two hexagons like padding of 15px or 20px.

@ImenKrichen I'd given you the link, that's the exact code I'm using. — Arman Khan, May 12 '19 at 13:34

score 1 · Accepted Answer · answered May 12 '19 at 13:38

1

I couldn't find a way to have padding in pixels, but here is what worked for me,

.hexIn {
    width:86%;
    padding-bottom: 99.307%; /* =  width / sin(60) */
}

Reduce the value of width of the hexIn block and the padding accordingly. You can visually analyze the padding in-between the blocks, try reducing/increasing until you fill comfortable.

padding-bottom = (width * 2)/1.7320

answered May 12 '19 at 13:38

Tan-007

378
3
16

very nice solution +1, tried to solve it with no success. if someone in the future will need all the example including your solution: https://codverter.com/src/webeditor?query=4419c3aa-bb46-49d0-bcda-a76c511e81fa – Jonathan Applebaum May 12 '19 at 14:06
Working perfectly! Thank you so much! – Arman Khan May 13 '19 at 06:14

How to add more padding between hexagons without losing responsiveness?

1 Answers1