Changing the page width

The default width of the content area on Wild Apricot site pages is 1200 pixels on newer themes and is 960 pixels on older ones. Even when the width of the browser is greater than 960 pixels, the content area does not expand. Instead, the site background fills the extra space.

Using CSS code, you can change the page width for all pages on your site.

For Casefile themes, you can set the placeholder in your page template to 100% width. For more information, click here.

To change the default page width, follow these steps:

1. Within the Website module, click the CSS option at the top of the screen.
2. In the Editor field, paste the following code:
   
   For Building Blocks, Kaleidoscope, and Tinted Tiles themes
   /* Code to change page width START */
.WaPlaceHolder { max-width: 1200px; }
/* Code to change page width END */
   
   For Homestead and Fiesta themes
   /* Code to change page width START */
.zoneInner, .zoneWrap, .zoneInner >
.WaPlaceHolder { max-width: 1200px; }
/* Code to change page width END */
   
   For Blueprint, Bookshelf, Clean Lines, Dark Impact, Firma, Showcase, Skyline, Terra, Treehouse, Whiteboard,  and White Space themes
   /* Code to change page width START */
.container_12 {
    width: 1200px;
}
.s1_grid_12{
    width: auto;
}
@media only screen and (max-width: 1199px) and (min-width: 600px){
.container_12 {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1200px;
    min-width: 600px;
}}
@media only screen and (max-width: 616px){
.container_12 {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 600px;
    min-width: 320px;
    display: block;
}}
/* Code to change page width END */ 
3. Change the 1200 value to whatever width you want. or whatever percentage you want. For Blueprint, Bookshelf, Clean lines, Dark impact, Firma, Showcase, Skyline, Terra, Treehouse, Whiteboard,  and White space themes, you also have to change the 1199 value in max-width: 1199px to the width you want minus 1. 
4. Click Save to save your changes.

Your site pages should now display their content across the width you specified.