Full (Viewport) Column

There's not mushroom in here!

Table of Contents

It is often the case that when the overall width of a layout is less than the viewport width (Many site layouts are like this), it would be nice to display something that takes up the whole width of the viewport (or very close too). A good example might be a data table with lots of detail, where you do not want to contain the table in a narrow width.

Full Width Section

What if a user has a wide display device and the content in a section may look better if it is allowed to expand?

Expand Me

When JavaScript is available, clicking this layout will expand it to the full width of the viewport and overlay any following content. The effect is reversible to toggle between wide and full viewport widths. Try toggling this content now between the two layouts.

Full Width Column Code

<!-- Markup (Note: .round class also used) -->
<section class="full round">...</section>

/* CSS */
.full {
  position: relative;
  left: 0;
  right: 0;
  background: #fefefe;
  padding: 1px 1%;
}

/* JavaScript */
/* Toggle Full columns out of page wrapper to increase width */
  $('.full').prepend('<i class="fa fa-plus-square" aria-hidden="true" style="float:right;padding:2px 2px 0 0;">&#160;</i>');
  $('.full>i[class^=fa]').attr('title', 'Click to toggle content width').toggleClick(function(){
    $(this).removeClass('fa-plus-square').addClass('fa-minus-square').parent().css({
      position: 'absolute', 'z-index': '2000'
    });
  }, 
  function(){
    $(this).removeClass('fa-minus-square').addClass('fa-plus-square').parent().css({
      position: 'relative', 'z-index': '0'
    });
  })

Stylish Pop Out

Of course, this can be taken to extremes with a few additional styles. It can look very effective when expanded from a narrow width column, as in the following example.

Burst Out

This could be used as some latest news or perhaps a new product or advertisement.

Pop Out Code
<!-- Markup -->
<section class="full burst">...</section>

/* CSS (Embedded style-sheet) */
.burst {
  background: #ee9!important;
  border: 22px ridge #ffc86e;
  border-image:url(yellow-burst.png) 22 round;
  border-image-width: .5;
  border-radius:2px;
  box-shadow:  5px 5px 8px #ccc;
  color: #680404;
  text-align: center;
}

Read more about fluid and responsive  Layouts.

.