Changing the widget width

When using widgets to display information from your Wild Apricot database on another site, you may want to change the default size of the iframe containing the widget. For example, the widget might be wider than the site page, forcing users to scroll to view hidden information.

To adjust the width of all widgets, go to the Website module and select the CSS option. On the screen that appears, enter the appropriate code for your theme (see below), then click Save to preview your customization within the preview area on the right. When you are finished making your changes, click Cancel to close the screen.

This code changes the width of all widgets.

For Treehouse, Clean Lines, White Space, and Dark Impact themes

.widgetMode .s1_grid_12,
.widgetMode .container_12
{
   /* change 400px to any desired value */
   width: 400px !important;;
   margin-left: 0 !important;
}

For all other themes

.widgetMode .cnPrimaryContentContainer,
.widgetMode .cnPrimaryContentBlock1ContentHolder,
.widgetMode .cnPrimaryContentBlock1Content,
.widgetMode .cnContentContainer,
.widgetMode .cnClipMainContainer,
.widgetMode .cnMainContainer .d9MainContainer,
.widgetMode .cnMainContainer .cnContentContainer .cnPrimaryContentContainer
{
   /* change 400px to any desired value */
width: 400px !important;
}

.widgetMode .cnMainContainer, .widgetMode .cnMainContainerTopCorners.cornersContainer, .widgetMode .cnMainContainerBottomCorners.cornersContainer
{
   /* change 424px to any desired value. It should be more then 400px to set some space for margins/paddings */
width: 424px !important;
}

.widgetMode .cnPrimaryContentContainer
{
float: left;
}