Remove the White Space in the Header and Footer

For white space under the Header

Method 1: Add custom code to remove the gap globally

This method will apply to your entire Online Store and remove the gap for all pages using the Debut theme.

Step 1: Copy these CSS code lines, specifically written to remove the gap.

html.gemapp .main-content {

   padding-top: 0 !important;

   padding-bottom: 0 !important;

   margin-top: 0 !important;

}

Step 2: Go to Shopify Admin > Online Store > Themes > Actions > Edit Code.

Step 3: On the left side panel, search and open the “theme.css” file under the “Assets” folder, and then scroll down to the bottom of the file on the right panel.

Step 4: Paste the code into the file, and hit “Save“.

Method 2: Edit the top margin value in GemPages Editor

This method removes the gap for one single page that you’re working on in GemPages.

Step 1: In the GemPages Dashboard, select your page and enter the Editor.

Step 2: In the Editor, select the element that is closest to the Header to show its configurations on the left sidebar. It could be any element (usually an Image, Hero Banner, Row element, or a Product module).

Step 3: Switch to the Design tab, click on Spacing to expand the section.

Step 4: Reduce the top margin value of the element to a negative value. The lower the value the closer the element will be to the Header

You can manually enter the value or drag the mini slider to change the margin value.

Step 5: Hit “Save” and “Publish” to check for your result on the live page.

Here’s a before and after comparison:

Before:

After:

For white space above the Footer

Similar to Method 2 for the Header, we’ll reduce the bottom margin value of the nearest element to the Footer.

Step 1: In the GemPages Dashboard, select your page and enter the Editor.

Step 2: Select the element that is closest to the Footer to start configuring it.

Step 3: Switch to the Design tab, click on Spacing to expand the section.

Step 4: Reduce the bottom margin value to a negative value.

You can drag the mini slider straight down to decrease the value and see the change applied in real-time in the Editor.

Step 5: Hit “Save” and “Publish” to check for the result on your live page.