[Resolved] Remove white space / top margin on specific pages without removing side margin.

[Hugo E]

We have a few pages where we don’t want white spacing at the top of our page. To solve this, I have tried the following steps:



Step 1: When we set the Customizing> Layout > Container > Content padding > Top to 0, most of the white space is removed. However, not all.
Step 2: Then, when we set Customizing> Layout > Container > Content layout to “one container”, then the last part of the white space at the top is removed.

However, we don’t want to lose the top padding on all our pages. Therefore I have tried the following:

Step 3: Set the Customizing > Layout > Container > Content padding > top back to 40.
Step 4: Created an Elements > Layout > Content > Content area and selected “Contained (no padding)”.

Combined with “one container”, this removes all the white space at the top of the pages selected in the Elements > Display Rules.

The only issue with this approach is that “Contained (no padding)” also removes the padding at the sides. So, when the page becomes narrow, there is no more padding on the left and right sides.

Do you know how I can remove the padding at the top for some specific pages without removing the padding at the sides and without removing the top padding on all pages?

Thanks in advance!

[David]

Hi there,

can you share a link to a page where this additional ‘space’ can be seen ?

[Hugo E]

Hi David,

Sure, see the links below:

1. Two examples of the white space we want to remove (one with a menu and one without a menu).
https://entrepreneurscan.com/entrepreneur-quiz/
https://entrepreneurscan.com/login/

2. And here is an example of a page where I have applied step 4, “Contained (no padding).” However, this also removes the side padding when the window becomes too narrow (mobile users).
https://entrepreneurscan.com/social-login/

Please let me know if you need any additional information.

[David]

Theres a few ways of doing this.
The ideal method, where you want to ‘break out’ from the themes container and its padding is to:

1. Set the pages Content Container to Full Width:

https://docs.generatepress.com/article/content-container/

2. Use the GenerateBlocks Plugins – Container Block to create the various sections of your page.

This way your can control the width and the padding of the content.

The alternative would require CSS being applied to each specific page – let me know if you would sooner do that

[Hugo E]

Thank you for your quick reply. I have looked into GenerateBlocks, but we are trying to use as few plugins as possible.

Could you share the CSS solution to remove only the top and bottom margin? And especially how we can make sure this CSS is only applied on specific pages?

[Ying]

Hi Hugo,

You can go with CSS like this:

.page-id-15976 .site-content, .page-id-6342 .site-content {
    padding-top: 0;
}

You can find the page id on the page > right click > inspect, look for the body element on the top:
https://www.screencast.com/t/zvuMF1W6Wk6U

You can keep on adding pages to the above CSS.

Let me know if that works 🙂

[Hugo E]

Thank you so much for sharing your solution!
This worked and solved the issue.

[Ying]

You are welcome 🙂

[Author]

Posts