Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit dolor eu felis maximus, et ultricies elit euismod. Etiam convallis tortor nisl, at mattis massa aliquam vitae. Aenean ligula erat, gravida at viverra sed, mattis sed urna. In ac orci quis lacus sodales euismod. Donec mauris leo, luctus sit amet turpis at, mollis ornare dui. In imperdiet, purus nec tincidunt aliquam, sem sem vulputate metus, sed tristique ante eros in lacus. Vestibulum lacus purus, gravida id tristique vel, varius in lectus. Suspendisse commodo lorem id aliquam bibendum. Sed convallis, risus eu semper scelerisque, nibh orci semper nulla, quis sagittis arcu nulla et ipsum. Morbi feugiat ex mi, et faucibus libero facilisis sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
  <p>Integer in lacus elit. Donec imperdiet facilisis faucibus. Maecenas et euismod felis. Aenean vulputate bibendum leo quis commodo. Fusce eget laoreet tellus. Aenean eget diam eget tortor ultricies pretium. Quisque dapibus imperdiet efficitur. Donec a tincidunt nisl, eu condimentum massa.</p>
  <p>In ullamcorper commodo sodales. Morbi ut ligula sed felis blandit consequat in ultrices ex. Integer ac suscipit magna. Phasellus et turpis vehicula, scelerisque sapien sed, eleifend orci. Cras id elit nec turpis aliquet scelerisque in molestie turpis. Vivamus porttitor urna orci, a hendrerit elit congue non. Phasellus a nibh nunc. Quisque vitae risus lacus. Phasellus non nunc laoreet, placerat nibh in, sagittis massa. Quisque tristique tincidunt magna eu semper. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
  <p>Pellentesque ac tortor in nisi volutpat suscipit nec eget ante. Aliquam sed enim ligula. Nam ac mollis massa. Nullam efficitur nec eros non vehicula. Suspendisse eget aliquam erat, vitae scelerisque lorem. Aenean sollicitudin suscipit dolor in consectetur. Vivamus neque enim, tincidunt vitae tortor at, tincidunt sagittis mauris. In nulla ex, sagittis a augue ut, consequat dapibus turpis. Curabitur convallis tincidunt sapien. Quisque vestibulum leo eget cursus placerat. Integer sed urna quam. Suspendisse tempus finibus felis et dapibus. Sed feugiat quam vestibulum arcu varius cursus. Phasellus nec orci odio.</p>
</div>
<div class="modal">
  <article class="box">
    <header>Dual axes responsive dialog</header>
    <main>
      <p><strong>This modal window's content is always fully visible on screen.</strong></p>
      <p><strong>It is using no media queries. The modal content is only limited by a fixed max-width, and max-height of the device screen.</strong> Integer in lacus elit. Donec imperdiet facilisis faucibus. Maecenas et euismod felis. Aenean vulputate bibendum leo quis commodo. Fusce eget laoreet tellus. Aenean eget diam eget tortor ultricies pretium.</p>
      <p><strong>It is using flexbox for centering and layout purposes, and viewport units for sizing boundaries.</strong> Pellentesque ac tortor in nisi volutpat suscipit nec eget ante. Aliquam sed enim ligula. Nam ac mollis massa. Nullam efficitur nec eros non vehicula. Suspendisse eget aliquam erat, vitae scelerisque lorem.</p>
      <p><strong>Try resizing the browser in both axes and see how it behaves. More info in the CSS.</strong> Vivamus neque enim, tincidunt vitae tortor at, tincidunt sagittis mauris. In nulla ex, sagittis a augue ut, consequat dapibus turpis. Curabitur convallis tincidunt sapien.</p>
    </main>
    <footer>
      <div class="button">Cancel</div>
      <div class="button">OK</div>
    </footer>
  </article>
</div>
              
            
!

CSS

              
                // You don't need to use SCSS for this. You should use Autoprefixer to avoid prefixing.

// *** LAYOUT RULES *** //
body {
  overflow: hidden; // Prevent body content scrolling
}

// Black background and modal content
.modal {
  display: flex; // So we can center '.box' using "margin: auto"
  position: fixed; // Always hold position
  left: 0;
  top: 0;
  height: 100vh; // Cover 100% of screen
  width: 100vw; // Cover 100% of screen
}

.box {
  display: flex;
  flex-direction: column;
  margin: auto; // Center '.box' in '.modal'
  max-width: 40rem; // Limit available width for '.box'
  max-height: 100vh; // Don't stretch '.box' screen height
}

main {
  overflow-y: auto; // Allow scrolling the content when needed
  padding: 1rem;
  padding-bottom: 0; // Scrollable content shouldn't have bottom padding
}

header, footer {
  flex: none; // Prevent flexbox from resizing '.box' header and footer
  height: 5rem; // Header and footer have fixed height
}



// *** STYLING RULES ONLY *** //
// You can ignore these
body {
  padding: 1rem;
  line-height: 1.625;
}

p {
  color: grey;
  
  strong {
    color: black;
  }
}

.modal {
  background-color: rgba(black,0.75);
}

.box {
  background: white;
}

header, footer {
  padding: 0 1rem;
  line-height: 5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

header {
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  color: dodgerblue;
  border-bottom: 1px solid #ccc;
}

footer {
  text-align: right;
  border-top: 1px solid #ccc;
}

// Simple button style
.button {
  line-height: normal;
  color: white;
  display: inline-block;
  border-radius: 6px;
  padding: 1rem 2rem;
  background-color: dodgerblue;
  margin-left: 0.7rem;
}
              
            
!

JS

              
                
              
            
!
999px

Console