How to remove white space between the main content and header/footer of my GemPages page

When you check your created page on Preview or Live page, you may notice that there is a white space between the header and the main body of your page.

This problem happens on specific themes only since this is a default padding-top of the themes’ layout.

Option 1: Overlap the white space by using negative margin-top

From the editor, you click on the first element of the main content >> navigate to tab Design >> section Spacing >> then add a negative margin-top for that element.

In this way, the first module will be pulled-up and overlap the white space.

Eg: I set margin-top: -55px for the first section of my page:

Option 2: Adding custom codes to remove the padding-top globally

Besides the first way above, the white space also can be removed by adding the following CSS to the bottom of theme.scss.liquid file:

html.gemapp .main-content {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
   margin-top: 0 !important;
}

To know more about editing the theme's code, please refer to this article.

In case your problem is the white space between the main content and footer section, you can use the first option, but alternatively, add a negative margin-bottom for the last section of your page.

Hope this helps. In case you need further assistance with this matter, please do not hesitate to contact us. We will be happy to help you.

Related Articles