Flex box Mobile Boiler

In this example below you will see how to do a Flex box Mobile Boiler with some HTML / CSS and Javascript

Displays well on mobile and desktop.

Thumbnail
This awesome code was written by meChrisReed, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright meChrisReed ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Flex box Mobile Boiler</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="phone">
  <div class="window">
    <!-- controlls (inputs for parent selectors) just the elements no wrapper-->
    <!-- .background -->
    <!-- .header -->
    <!-- .contet -->
    <!-- .drawer-blackout -->
    <!-- .main-drawer -->
    <!-- .second-drawer -->
  </div> <!-- .window -->
</div> <!-- .phone -->
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/meChrisReed/flex-box-mobile-boiler-aBcJv */
/* Structure */
html {
   height: 100%;
} 

body {
  display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
  display: -moz-box;      /* OLD: Firefox (buggy) */ 
  display: -ms-flexbox;   /* MID: IE 10 */
  display: -webkit-flex;  /* NEW, Chrome 21–28, Safari 6.1+ */
  display: flex;          /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */

  -webkit-box-align: center; -moz-box-align: center; /* OLD… */
  -ms-flex-align: center; /* You know the drill now… */
  -webkit-align-items: center;
  align-items: center;

  -webkit-box-pack: center; -moz-box-pack: center; 
  -ms-flex-pack: center; 
  -webkit-justify-content: center;
  justify-content: center;

  height: 100%;
  width: 100%; /* needed for Firefox */
  padding: 0;
  margin: 0;
  
  /* Instance styles Go Here: backgrounds, fonts... */
} 

.phone {
  display: -webkit-box; display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
 
  -webkit-box-align: center; -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;

  width: 3.8in;
  max-width: 100%;
  height: 6.5in;
  max-height: 100%;
  border: .5em solid #090909;
  border-radius: .75em;
  
}
@media (max-width: 3.8in) {
  .phone {
    border-left: none;
    border-right: none;
  }
}
@media (max-height: 6.5in) {
  .phone {
    border-top: none;
    border-bottom: none;
  }
}

.window {
  position: fixed;
  width: 3.8in;
  max-width: 100%;
  height: 6.5in;
  max-height: 100%;
  overflow: hidden;
}

/* Instance Element Styles Here */

/*Downloaded from https://www.codeseek.co/meChrisReed/flex-box-mobile-boiler-aBcJv */
 /*
 
 for a better understanding of how this works chekc out :
   http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/
and:
http://davidbcalhoun.com/2010/viewport-metatag
 
 */

Comments