Layout

Boxed layouts offer the same widths for everything on the page. Boxed designs are clean and provide a uniform website design that suits many different purposes. One of the biggest advantages is that it can be viewed at different screen resolutions without destroying the quality and readability of the layout.

In order to properly use the Boxed layout, you should initialize Remark() on the <body> tag.

<script>
var elem = document.getElementsByTagName('body');
var foo = new Remark(elem, { layout: 'boxed' });

// jQuery method using Remark constructor function.
$js(function () {
  $js('body').remarkable({ layout: 'boxed' });
});
</script>

Customizing breaking points

By default, the .remark-layout-boxed class utilizes992px and 1200px as its default breaking points. You can modify these breaking points, add additional breaking points or adjust the width of the container in the main remark.css file.

@media (min-width: 992px) {
  .remark-layout-boxed > .container, 
  .remark-layout-boxed > .container .header {
    margin-left: auto;
    margin-right: auto;
    width: 992px !important;
  }
}

@media (min-width: 1200px) {
  .remark-layout-boxed > .container,
  .remark-layout-boxed > .container .header {
    width: 1200px !important;
  }
}
PreviousGetting StartedNextLazyload

Last updated

Was this helpful?