How to Remove the Padding from Canvas Optins

OptinMonster’s Canvas optins 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 optin you’ll want to remove this default padding following this guide.

Lightbox Canvas Optin with the Default Padding:
Lightbox Canvas Padding

Important: This guide assumes you’re already familiar with our Custom CSS tool.


Lightbox Canvas

To remove the padding from your Lightbox Canvas optin, copy the following CSS and paste it into the Custom CSS field and update it to use your own optin’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 optin.

Lightbox Canvas No Padding


Mobile Canvas

To remove the padding from your Mobile Canvas optin, copy the following CSS and paste it into the Custom CSS field and update it to use your own optin’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 optin.

Mobile Canvas No Padding


Fullscreen Canvas

Nothing to do here. Fullscreen Canvas optins 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 optins don’t have any padding by default so you’re good to go!

After Post / Inline Canvas No Padding


Sidebar Canvas

Nothing to do here. Sidebar Canvas optins 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 optin, copy the following CSS and paste it into the Custom CSS field and update it to use your own optin’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 optin.

Slide-In Canvas No Padding


Floating Bar Canvas

To remove the padding from your Floating Bar Canvas optin, copy the following CSS and paste it into the Custom CSS field and update it to use your own optin’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 optin.

Floating Bar Canvas No Padding


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