responsive - CSS Grid of Hexagons - Display as squares at mobile resolution -
so found resource here https://github.com/web-tiki/responsive-grid-of-hexagons responsive grid of hexagons images. know how can update when display hits <768 displays 2 columns of square boxes , <400 1 column of square boxes? far have updated hexagons.css no luck. hoping effect of website http://builtbybuffalo.com/
* { margin: 0; padding: 0; } body { background: rgb(123, 158, 158); } .container { width: 100%; margin: 0 auto; } #hexgrid { display: flex; flex-wrap: wrap; width: 90%; margin: 0 auto; overflow: hidden; font-family: 'raleway', sans-serif; font-size: 15px; list-style-type: none; } .hex { position: relative; visibility:hidden; outline:1px solid transparent; /* fix jagged edges in ff on hover transition */ } .hex::after{ content:''; display:block; padding-bottom: 86.602%; /* = 100 / tan(60) * 1.5 */ } .hexin{ position: absolute; width:96%; padding-bottom: 110.851%; /* = width / sin(60) */ margin:0 2%; overflow: hidden; visibility: hidden; outline:1px solid transparent; /* fix jagged edges in ff on hover transition */ -webkit-transform: rotate3d(0,0,1,-60deg) skewy(30deg); -ms-transform: rotate3d(0,0,1,-60deg) skewy(30deg); transform: rotate3d(0,0,1,-60deg) skewy(30deg); } .hexin * { position: absolute; visibility: visible; outline:1px solid transparent; /* fix jagged edges in ff on hover transition */ } .hexlink { display:block; width: 100%; height: 100%; text-align: center; color: #fff; overflow: hidden; -webkit-transform: skewy(-30deg) rotate3d(0,0,1,60deg); -ms-transform: skewy(-30deg) rotate3d(0,0,1,60deg); transform: skewy(-30deg) rotate3d(0,0,1,60deg); } /*** hex content **********************************************************************/ .hex img { left: -100%; right: -100%; width: auto; height: 100%; margin: 0 auto; -webkit-transform: rotate3d(0,0,0,0deg); -ms-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg); } .hex h1, .hex p { width: 100%; padding: 5%; box-sizing:border-box; background-color: rgba(0, 128, 128, 0.8); font-weight: 300; -webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out; transition: transform .2s ease-out, opacity .3s ease-out; } .hex h1 { bottom: 50%; padding-top:50%; font-size: 1.5em; z-index: 1; -webkit-transform:translate3d(0,-100%,0); -ms-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0); } .hex h1::after { content: ''; position: absolute; bottom: 0; left: 45%; width: 10%; text-align: center; border-bottom: 1px solid #fff; } .hex p { top: 50%; padding-bottom:50%; -webkit-transform:translate3d(0,100%,0); -ms-transform:translate3d(0,100%,0); transform:translate3d(0,100%,0); } /*** hover effect **********************************************************************/ .hexlink:hover h1, .hexlink:focus h1, .hexlink:hover p, .hexlink:focus p{ -webkit-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } /*** hexagon sizing , row indentation *****************************************************************/ #hexgrid{ padding-bottom: 4.4% } .hex { width: 20%; /* = 100 / 5 */ } .hex:nth-child(9n+6){ /* first hexagon of rows */ margin-left:10%; /* = width of .hex / 2 indent rows */ } /*show 2 columns of squares ???*/ @media (max-width: 768px) { #hexgrid{ padding-bottom: 11.2% } .hex { width: 50%; display: block; float: left; margin: 10px; } .hex:nth-child(9n+6) { margin-left: 0; } .hexin, .hexlink, .hex img { -webkit-transform: none; -ms-transform: none; transform: none; } } /* show 1 column of squares ???*/ @media (max-width: 400px) { }<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="hexagons.css"> <link href='https://fonts.googleapis.com/css?family=raleway:300' rel='stylesheet' type='text/css'> </head> <body> <ul id="hexgrid"> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> </ul> </body> </html>
you're trying apply float layout-ing techniques flex items. won't anything. want is:
@media (max-width: 768px) { .hex { flex: 0 0 50%; } } @media (max-width: 400px) { .hex { flex-basis: 100%; } } you replace flex-basis width in particular example:
* { margin: 0; padding: 0; } body { background: rgb(123, 158, 158); } .container { width: 100%; margin: 0 auto; } #hexgrid { display: flex; flex-wrap: wrap; width: 90%; margin: 0 auto; overflow: hidden; font-family: 'raleway', sans-serif; font-size: 15px; list-style-type: none; } .hex { position: relative; visibility:hidden; outline:1px solid transparent; /* fix jagged edges in ff on hover transition */ } .hex::after{ content:''; display:block; padding-bottom: 86.602%; /* = 100 / tan(60) * 1.5 */ } .hexin{ position: absolute; width:96%; padding-bottom: 110.851%; /* = width / sin(60) */ margin:0 2%; overflow: hidden; visibility: hidden; outline:1px solid transparent; /* fix jagged edges in ff on hover transition */ -webkit-transform: rotate3d(0,0,1,-60deg) skewy(30deg); -ms-transform: rotate3d(0,0,1,-60deg) skewy(30deg); transform: rotate3d(0,0,1,-60deg) skewy(30deg); } .hexin * { position: absolute; visibility: visible; outline:1px solid transparent; /* fix jagged edges in ff on hover transition */ } .hexlink { display:block; width: 100%; height: 100%; text-align: center; color: #fff; overflow: hidden; -webkit-transform: skewy(-30deg) rotate3d(0,0,1,60deg); -ms-transform: skewy(-30deg) rotate3d(0,0,1,60deg); transform: skewy(-30deg) rotate3d(0,0,1,60deg); } /*** hex content **********************************************************************/ .hex img { left: -100%; right: -100%; width: auto; height: 100%; margin: 0 auto; -webkit-transform: rotate3d(0,0,0,0deg); -ms-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg); } .hex h1, .hex p { width: 100%; padding: 5%; box-sizing:border-box; background-color: rgba(0, 128, 128, 0.8); font-weight: 300; -webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out; transition: transform .2s ease-out, opacity .3s ease-out; } .hex h1 { bottom: 50%; padding-top:50%; font-size: 1.5em; z-index: 1; -webkit-transform:translate3d(0,-100%,0); -ms-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0); } .hex h1::after { content: ''; position: absolute; bottom: 0; left: 45%; width: 10%; text-align: center; border-bottom: 1px solid #fff; } .hex p { top: 50%; padding-bottom:50%; -webkit-transform:translate3d(0,100%,0); -ms-transform:translate3d(0,100%,0); transform:translate3d(0,100%,0); } /*** hover effect **********************************************************************/ .hexlink:hover h1, .hexlink:focus h1, .hexlink:hover p, .hexlink:focus p{ -webkit-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } /*** hexagon sizing , row indentation *****************************************************************/ #hexgrid{ padding-bottom: 4.4% } .hex { width: 20%; /* = 100 / 5 */ } .hex:nth-child(9n+6){ /* first hexagon of rows */ margin-left:10%; /* = width of .hex / 2 indent rows */ } /*show 2 columns of squares ???*/ @media (max-width: 768px) { #hexgrid{ padding-bottom: 11.2% } .hex { flex: 0 0 50%; } .hex:nth-child(9n+6) { margin-left: 0; } .hexin, .hexlink, .hex img { -webkit-transform: none; -ms-transform: none; transform: none; } } /* show 1 column of squares ???*/ @media (max-width: 400px) { .hex { flex-basis: 100%; } }<ul id="hexgrid"> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexin"> <a class="hexlink" href="#"> <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </div> </li> </ul>
Comments
Post a Comment