Styling Compatibility

Make Sure Your Styles are Compatible with Layouts

If your site has modified the base width of the page – the defaults being 990px for the page, and 670px for the content area, you may have to customize the widths of the various layouts column sizes. If using the default page and content widths are not an option, you may wish to override the layout column size classes as follows in your site’s stylesheets:

/* full width column. */
body.layout_detail div.column_lead { width: <content area width>px; margin-right: 0; }
/* 2/3 width column. */
body.layout_detail div.column_large { width: <content area width * 2/3 - 10>px; }
/* 1/2 width column. */
body.layout_detail div.column_medium { width: <content area width * 1/2 - 10>px; }
/* 1/3 width column. */
body.layout_detail div.column_small { width: <content area width * 1/3 - 20>px; }
/* sidebar column. */
body.layout_detail .sidebar div.column { width: <sidebar width>px; }
body.layout_detail .sidebar div.column img { max-width: <sidebar width>px; }
Click to copy

You may need to adjust the pixel widths further if your site applies different padding or borders to layout columns.


Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.