Rebuilt site: Pascal pour Elle

Pascal pour Elle

One of the first sites I built when joining my current employer about three years ago was Pascal pour Elle, a salon whose website needed a makeover and HTML5 update. Recently, the client wanted a full makeover, so I got back to work. The new and improved site rolled out last Friday. Continue reading Rebuilt site: Pascal pour Elle

centering a perfectly circular frame

A StackOverflow visitor asked if it was possible to frame his webpages in a perfectly circular frame, which would resize to fill the browser window but not spill over the edges.

It was a curious problem, so I tinkered with it and found out we could, using a few modern tricks like viewport-height units (which aren’t universally supported, sadly). The result uses two divs, one inside the other:

<div class="wrapper">
  <div class="circular"><!-- content --></div>
</div>

And the following CSS:

html, body {
 height: 100%;
 padding: 0;
 margin: 0;
}
.wrapper {
 width: 100vh; /* viewport-height units */
 max-width: 100%;
 margin: 0 auto; /* for horizontal centering */
 position: relative; /* for vertical centering */
 top: 50%; /* for vertical centering */
}
.circular {
 overflow: scroll; 
 padding: 13% 13%; /* keep text within circle */
 border-radius: 50%;
 border: 10px solid #000;
 box-sizing: border-box; /* so 100% width includes border */
 height: 100vw; /* viewport-width units */
 max-height: 100vh; /* viewport-height units */
 margin-top: -50%; /* for vertical centering */
}

See the Pen vertically centered circular div by Martin Blase (@mblase75) on CodePen.