How to Use Content Column Classes

Follow

How to Use Content Column Classes

In Genesis we have added the ability to create columns (column classes). Below you find instructions on how to use content column classes.

2-Columns

To add two columns of text, enter the text below into your post/page editor:

Required CSS Code

The CSS code that is required for the content column classes is included in Genesis, as well as the most current version of child themes.

If you are using an earlier version of either, you can add the CSS below to your style.css file and it should work:

  /* Column Classes
  Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css
  --------------------------------------------- */
   
  .five-sixths,
  .four-sixths,
  .one-fourth,
  .one-half,
  .one-sixth,
  .one-third,
  .three-fourths,
  .three-sixths,
  .two-fourths,
  .two-sixths,
  .two-thirds {
  float: left;
  margin-left: 2.564102564102564%;
  }
   
  .one-half,
  .three-sixths,
  .two-fourths {
  width: 48.717948717948715%;
  }
   
  .one-third,
  .two-sixths {
  width: 31.623931623931625%;
  }
   
  .four-sixths,
  .two-thirds {
  width: 65.81196581196582%;
  }
   
  .one-fourth {
  width: 23.076923076923077%;
  }
   
  .three-fourths {
  width: 74.35897435897436%;
  }
   
  .one-sixth {
  width: 14.52991452991453%;
  }
   
  .five-sixths {
  width: 82.90598290598291%;
  }
   
  .first {
  clear: both;
  margin-left: 0;
  }
view rawcolumns.css hosted with ❤ by GitHub
 
 
Original Article at http://my.studiopress.com/docs/content-column-classes/
Have more questions? Submit a request

Required CSS Code

The CSS code that is required for the content column classes is included in Genesis, as well as the most current version of child themes.

If you are using an earlier version of either, you can add the CSS below to your style.css file and it should work:

  /* Column Classes
  Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css
  --------------------------------------------- */
   
  .five-sixths,
  .four-sixths,
  .one-fourth,
  .one-half,
  .one-sixth,
  .one-third,
  .three-fourths,
  .three-sixths,
  .two-fourths,
  .two-sixths,
  .two-thirds {
  float: left;
  margin-left: 2.564102564102564%;
  }
   
  .one-half,
  .three-sixths,
  .two-fourths {
  width: 48.717948717948715%;
  }
   
  .one-third,
  .two-sixths {
  width: 31.623931623931625%;
  }
   
  .four-sixths,
  .two-thirds {
  width: 65.81196581196582%;
  }
   
  .one-fourth {
  width: 23.076923076923077%;
  }
   
  .three-fourths {
  width: 74.35897435897436%;
  }
   
  .one-sixth {
  width: 14.52991452991453%;
  }
   
  .five-sixths {
  width: 82.90598290598291%;
  }
   
  .first {
  clear: both;
  margin-left: 0;
  }
view rawcolumns.css hosted with ❤ by GitHub
 
 
Original Article at http://my.studiopress.com/docs/content-column-classes/
", "mainEntityOfPage": "True" }