Tips and Tricks: Removing Padding

The Challenge

SnapApp automatically adds a small padding to all pages.  In most cases this looks nice and makes the text more readable.  However, if you add a hero image or carousel you may want the images to extend to the page. Here is how you do this.

The Solution

1) Create a no-padding.css file

To solve this you need to create a small css file to remove the padding. Adding the CSS directly to the page will not work because it is rendered later. Here is the contents of the css file:

.container-fluid {
margin: 0 !important;
padding: 0 !important;
}
.container {
margin: 0 !important;
padding: 0 !important;
}

You can download this file here:

2) Go to the detail-view for the page.

To upload the css file to the page, you need to go to the /detail-view of the page.  You can get there by:

• From Settings Home: Select Views from the UX menu. Find the view and clicking the link on the view name.
• From the Pagebuilder: Open the Details modal by clicking the second button on the top navbar. Click File Attachments button

2) Upload attachment 

To upload the css file to the page, click "Add New Attachment" in the attachments related list below the page details. 

Then select "File" from the Type dropdown and drop file on to file field:

The Result