How can I fit this grid into initial window size, but allow users to zoom? (non-responsive)

Question

The following hexagonal grid (with fixed width and height) should fit into the initial window size of the browser.

Users should be able to zoom in arbitrarily (with both pinch-to-zoom and/or keyboard shortcuts), but in the initial state, the grid should just about fill the window size.

AFAIK, a responsive design disallows keyboard zooming (such as CMD + on MacOS) – so this is not what I'm looking for.

HTML (DEMO)

<div id="wrapper">

  <div class="hex-row">
    <div class="hexagon"></div>
    <div class="hexagon"></div>
    <div class="hexagon"></div>
    <div class="hexagon"></div>
    <div class="hexagon"></div>
  </div>

  <div class="hex-row even">
    <div class="hexagon"></div>
    <div class="hexagon"></div>
    <div class="hexagon"></div>
    <div class="hexagon"></div>
    <div class="hexagon"></div>
  </div>

</div>

CSS

.hexagon {
  position: relative;
  width: 250px;
  height: 144.34px;
  background-color: #33cc99;
  margin: 72.17px 0;
  float: left;
  margin-left: 5.5px;
  margin-bottom: 5.5px;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 125px solid transparent;
  border-right: 125px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 72.17px solid #33cc99;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 72.17px solid #33cc99;
}

.hex-row {
  clear: left;
  width: 289vh;
}

.hex-row.even {
  margin-left: 128px;
  width: 289vh;
}

This is what I get vs. the desired effect (on the right):

It should not necessarily be responsive when changing the size of the window manually.

I tried to outsmart the grid with a wrapper, but no success. A short explanation on what's going on here, would be helpful:

html,
body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

#wrapper {
  height: 100%;
  min-height: 100%;
}

I wonder if there is any kind of automatically "zooming out" when opening the page?

`transform: scale()` might be an option: https://jsfiddle.net/70n0671j/5/ — Asons, Apr 14 '17 at 14:19
Thank you, @LGSon ! I considered using [a similar approach with jQuery](http://stackoverflow.com/questions/18750769/scale-div-with-its-content-to-fit-window) in order to scale the grid proportionally to `$window.width();` and `.height()`. But I still have to figure out, how to adjust it for the initial window size only - instead of `$(window).resize`. Any experiences with that? — v.kasto, Apr 14 '17 at 15:03

score 2 · Answer 1 · answered Apr 14 '17 at 15:23

I think that you need to rely on a little JS at least to scale the section on smaller window height.

In addition you should make the section fully responsive for consistency.

So something like this:

function scaleSection(){
  var $win = $(window)
  var $wrapper = $('#wrapper');
  if ($wrapper.outerHeight() > $win.height()) {
    $wrapper.css({
      'transform': 'scale(' + $win.height()/$wrapper.outerHeight() + ')'
    })
  };
}

scaleSection();
$(window).resize(function() {
  scaleSection();
})

html,
body {
  margin: 0;
  padding: 0;
}

#wrapper { 
 overflow: hidden;
    padding: 0 0 5%;
    transform-origin: 0 0;
}

.hexagon {
  position: relative;
  width: 17.5%;
  background-color: #33cc99;
  margin: 5.5% 0;
  padding: 0 0 9.7%;
  float: left;
  margin-left: 0.7%;
  margin-bottom: 0.5%;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 8vw solid transparent;
  border-right: 8vw solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 5vw solid #33cc99;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 5vw solid #33cc99;
}

.hex-row {
  clear: left;
  margin-right: 8.4%;
}

.hex-row.even {
  margin: 0 0 0 8.4%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="hex-row">
    <div class="hexagon" style="float:left"></div>
    <div class="hexagon" style="float:left"></div>
    <div class="hexagon" style="float:left"></div>
    <div class="hexagon" style="float:left"></div>
    <div class="hexagon" style="float:left"></div>
  </div>
  <div class="hex-row even">
    <div class="hexagon" style="float: left"></div>
    <div class="hexagon" style="float: left"></div>
    <div class="hexagon" style="float: left"></div>
    <div class="hexagon" style="float: left"></div>
    <div class="hexagon" style="float: left"></div>
  </div>
</div>

Looks great, @drip ! The only problem occurs in Safari when zooming in or out with `command -/+` . Then, the scaling isn't applied equally to the pseudo elements. — v.kasto, Apr 14 '17 at 16:41
just to confirm what @v.kasto observed; the solution **works fine in Firefox and Chrome**, just not Safari. — maxheld, Apr 14 '17 at 16:55
@v.kasto Got to love Safari. Swap all the "%" with "vw" and it work better: https://jsfiddle.net/70n0671j/15/ But you might have to drop the float if you like to keep them on the same line. That's something for you do decide, but don't let me take all of the fun, try it yourself. :) — drip, Apr 14 '17 at 18:49
Yeah, lots of hexagonal fun! ;) Thanks for your reply @drip. I'll figure something out with your idea and [this one](https://jsfiddle.net/FrauKaaa/2d6o8muq/) (based on the SO question mentioned above). — v.kasto, Apr 15 '17 at 07:43

How can I fit this grid into initial window size, but allow users to zoom? (non-responsive)

1 Answers1