Center page content
:
View source code in CONTENTdm Cookbook Demo Site.
View: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; } }