Customize site width

  • Updated on May 1, 2016
  • Packaged under Layout
  • Level
    intermediate

Beans uses UIkit default container width, which is 1200px. You can customize it using CSS or using the approriate LESS variable.

Using CSS

The quickest method to customize your site width is to simply override the default CSS.

.uk-container {
    max-width: 1600px;
}

While this is quick and easy, it isn’t the best approach, as it adds additional CSS which it isn’t the case in the second method below.

Using LESS variable

The site width can be changed by setting the @utility-container-large-max-width LESS variable. If you are using the started child theme we provide, the code snippet below must be added in style.less.

@utility-container-large-max-width: 1200px;