How to remove the white space in the Header and Footer

This article will guide you through the steps to remove the white gap you often see in your Header and Footer on your live page.

 

For white space under the Header

 

Method 1: Add custom code to remove the gap globally

 

Please note that since every Shopify theme uses a different coding style, the steps below only apply to the Debut theme as an example. If you are using another theme, please contact our GemPages Support Team for assistance with removing the white gap.

 

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.


And there you have it! There are more guides and tutorials waiting for you in your Help Center. For further assistance, please reach out to our GemPages Support Team via email or live chat.


Was this helpful?