Menu
First of all, I apologise if this is not the right place to ask this question. I just don't know any other source for Q/A.
I have a college project in which I have to submit an exact replica of this Site for passing my web dev practical.
I have managed to copy everything and only thing that is remaining is thehexagonal grid.
If someone can visit the site they can see that the number of hexagons per row changes according to width of browser window.
Here is my Code for the grid
CSS and HTML
.container {
margin-top: 120px;
}
.hex-3-row {
display: table;
margin: 30px auto;
}
.hex {
display: inline-block;
width: 190px;
height: 110px;
color: white;
background-color: red;
position: relative;
margin-left: 15px;
z-index: 110;
text-align: center;
line-height: 110px;
}
.hex::after {
content: "";
background-color: red;
height: 110px;
width: 190px;
position: absolute;
top: 0px;
left: 0px;
transform: rotate(60deg);
z-index: -1;
}
.hex::before {
content: "";
background-color: red;
height: 110px;
width: 190px;
position: absolute;
top: 0px;
left: 0px;
transform: rotate(-60deg);
z-index: -1;
}
img {
position: relative;
height: 150px;
width: 150px;
top: 50%;
transform: translateY(-50%);
}<html>
<head>
<title>hexagon</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="container">
<div class="hex-3-row">
<div class="hex">
<img src="arrow.png" alt="image">
</div>
<div class="hex">
<img src="arrow.png" alt="image">
</div>
<div class="hex">
<img src="arrow.png" alt="image">
</div>
</div>
<div class="hex-3-row">
<div class="hex">
<img src="arrow.png" alt="image">
</div>
<div class="hex">
<img src="arrow.png" alt="image">
</div>
<div class="hex">
<img src="arrow.png" alt="image">
</div>
<div class="hex">
<img src="arrow.png" alt="image">
</div>
</div>
<div class="hex-3-row">
<div class="hex">
<img src="arrow.png" alt="image">
</div>
<div class="hex">
<img src="arrow.png" alt="image">
</div>
<div class="hex">
<img src="arrow.png" alt="image">
</div>
</div>
</div>
</body>
</html>Now the grid I managed is looking a bit like theirs in full width.
But how can I make it responsive ? and change number of Hexagons per row according to width ?
I've tried to read their source code too but couldn't figure out the trick except that they're using <br> to do the trick but I just cant manage.
Would be really grateful if someone can point me in the right direction and also share any source for learning advanced CSS like this. Thanks a lot everyone for your time.
I've already tried the solution from this thread but what I'm looking for is a solution to do it just like builtbybuffalo.com guys, using <div> <br> and stuffs, not <ul><li>.
912
This is essentially your standard columned layout with a modified row breaking element. (They're using br for this, but it could be any element with the right styling.) There are a few breakpoints and the styles of the classes on the cells and the breaking elements are changed depending on which breakpoint is used. Note that the breaking elements are at the spots where the rows need to break and the classes set on them control which breakpoint uses that breaking element.
They aren't grouping them into rows as you are; there's essentially a single row of elements with carefully placed breaking elements that are shown/hidden depending on which breakpoint is active.
175
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
