How to Remove the Padding from Canvas Campaigns

OptinMonster’s Canvas Campaigns have a padding style applied by default. If you’re trying to add HTML content that spans the full-width or full-height of the Campaign you’ll want to remove this default padding following this guide.

Important: This guide assumes you’re already familiar with our Custom CSS tool.
Lightbox Canvas Campaign with the Default Padding
Lightbox Canvas Padding

To remove the padding from your Lightbox Canvas campaign, copy the following CSS and paste it into the Custom CSS field and update it to use your own campaign’s unique slug and namespace.

Lightbox Canvas Custom CSS to Remove the Default Padding

html div#om-tpuklhkudymvohg1 #charlotte-body { 
    padding: 0 !important; 
}

This will be immediately reflected in the live preview of your campaign.

Lightbox Canvas No Padding


Mobile Canvas

To remove the padding from your Mobile Canvas campaign, copy the following CSS and paste it into the Custom CSS field and update it to use your own campaign’s unique slug and namespace.

Mobile Canvas CSS to remove default padding

html div#om-hwl3kec4k6rjejuf #greensboro-optin-body {
    padding: 0 !important;
}

This will be immediately reflected in the live preview of your campaign.

Mobile Canvas No Padding


Fullscreen Canvas

Nothing to do here. Fullscreen Canvas campaigns don’t have any padding by default so you’re good to go!

Fullscreen Canvas No Padding


After Post / Inline Canvas

Nothing to do here. After Post / Inline Canvas campaigns don’t have any padding by default so you’re good to go!

After Post / Inline Canvas No Padding


Nothing to do here. Sidebar Canvas campaigns don’t have any padding by default so you’re good to go!

Sidebar Canvas No Padding


Slide-In Canvas

To remove the padding from your Slide-In Canvas campaign, copy the following CSS and paste it into the Custom CSS field and update it to use your own campaign’s unique slug and namespace.

Slide-In Canvas CSS to remove default padding

html div#om-c4i5y4zgfzlw2dlo #boone-optin-body {
    padding: 0 !important;
}

This will be immediately reflected in the live preview of your campaign.

Slide-In Canvas No Padding


Floating Bar Canvas

To remove the padding from your Floating Bar Canvas campaign, copy the following CSS and paste it into the Custom CSS field and update it to use your own campaign’s unique slug and namespace.

Floating Bar Canvas CSS to remove padding

html div#om-unid8xqannjxsgwp #orlando-body {
    padding: 0 !important;
}

This will be immediately reflected in the live preview of your campaign.

Floating Bar Canvas No Padding


Frequently Asked Questions

Q: Why isn’t my CSS applying? I copied the code from your examples.

A: Remember, you must update any example CSS provided in our documentation to target your specific campaign’s slug and namespace. To learn more see How to Use OptinMonster’s Custom CSS Tool.