Skip to main content
OCLC Support

Center page content

 

 Link See a live example.

 ViewView source code in CONTENTdm Cookbook Demo Site.

Customization courtesy of Columbus Metropolitan Library.

By default, the CONTENTdm website renders page content aligned with the left side of the window. If you prefer your content to be center-aligned in the browser window it is easy to move it using custom CSS rules. In this example, the main content container is being given a fixed width and the margin-left and margin-right styles are set to auto, which moves the main div to the center of the window. Additionally, the content div used on the search page needs rules to force it to occupy the full window width.

All of these rules are applied only at the tablet and desktop window size (a width of 768px or more).

@media screen and (min-width: 768px) {
  .CoreLayout-mainwrapper {
    padding-left: 0px;
    padding-right: 0px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
  .CoreLayout-mainWrapperContainer {
    width: 100%;
    display: block;
  }
}