Resizing Modals and Slideouts

Changing the default widths for modals and slideouts requires some custom CSS -- if you're not familiar with using custom CSS to style your Appcues content, check out our  custom CSS intro doc.

Modals

Modals default to 650px wide. You can make them wider or narrower by adjusting their width, the width of the top progress bar and the skip button in the upper right of the modal. To make a modal narrower, use the following custom CSS (substituting 400px for your desired width):

appcues[data-pattern-type="modal"] cue, appcues[data-pattern-type="fullscreen"] cue, appcues[data-pattern-type="modal"] .appcues-progress, appcues[data-pattern-type="fullscreen"] .appcues-progress, appcues[data-pattern-type="modal"] .appcues-skip, appcues[data-pattern-type="fullscreen"] .appcues-skip {
    width: 400px;
}

You can make modals wider in the same manner, but you also must remove their max-width restriction. The following custom CSS can be used (substituting 900px for your desired width):

appcues[data-pattern-type="modal"] cue, appcues[data-pattern-type="fullscreen"] cue, appcues[data-pattern-type="modal"] .appcues-progress, appcues[data-pattern-type="fullscreen"] .appcues-progress, appcues[data-pattern-type="modal"] .appcues-skip, appcues[data-pattern-type="fullscreen"] .appcues-skip {
    width: 900px;
    max-width: none;
}

Slideouts

Slideouts default to 400px wide. You can make them narrower by adjusting their width and min-width restriction. The following CSS can be used (substituting 300px for your desired width):

appcues[data-pattern-type=shorty] modal-container, appcues[data-pattern-type=slideout] modal-container {
    width: 300px;
    min-width: 300px;
}

You can make slideouts wider by adjusting their width and max-width restriction. The following CSS can be used (substituting 500px for your desired width):

appcues[data-pattern-type=shorty] modal-container, appcues[data-pattern-type=slideout] modal-container {
    width: 500px;
    max-width: 500px;
}

Still need help? Contact Us Contact Us