Karma 100% width container

This tutorial describes how to create a 100% full width container within the Karma theme.

Overview

The simplest way to achieve a 100% full width container is by adding a small bit of custom CSS code to the website.

  1. Create a new page on your website and choose the “Blank Canvas” page template.
  2. Publish the page and view it in the web browser
  3. View the page’s code source in your web browser. In FireFox this is done with the keyboard shortcode of ctrl + U  (if you’re unfamiliar with looking at a pages source code please simply do a google search to learn more)
  4. We are now looking at the pages source code so that we can retrieve the custom CSS Class applied to the Body element of the page. This class name is unique to each page and will allow us to apply the full-width settings to this page only. In our example our webpage has a class name of “page-id-48”. Karma 100% full width
  5. Next we’ll copy/paste the following CSS code into our theme. We can apply this code directly in the “Custom CSS” section of Karma’s Site Options Panel located under” Appearance > Site Options > General > Custom CSS.
  6. Please note: You will need to change the “page-id-48” in the code below to your page’s ID which you retrieved in step 4.

CSS Code:

  .page-id-48 .main-area, .page-id-48 #content.content_full_width { width: 100% !important; padding: 0 !important; }