Remove Space Under the Header and Above the Footer

Sparkling
1

Hello,

I need help deleting the space under the header and above the footer on two of my web pages - About Us and Contact Us.

Also, the content area (the default white space on WordPress), I need help increasing it to full-length, so that there’s no grey space for both the pages, just like my homepage.

Lastly, I need help deleting the titles on the respective pages - About Us title and Contact Us title

Here’s my site - flyfishingspotter.com

Your help is always appreciated :slight_smile:

Hope to hear from you

Ray

2

Hey there,
Hope you’re doing well today

Kindly add and save the following code to Appearance > Customize > Additional CSS:

.page-id-31 .post-inner-content, .page-id-34 .post-inner-content {
    border: none!Important;
    padding: 0px!Important;
}

.page-id-31 .main-content-area, .page-id-34 .main-content-area {
    margin: 0px!Important;
}

.page-id-31 header.entry-header.page-header, .page-id-34 header.entry-header.page-header {
    display: none!Important;
}

.page-id-31 .main-content-inner.col-sm-12.col-md-12, .page-id-34 .main-content-inner.col-sm-12.col-md-12 {
    margin-top: -21px!important;
}

I hope this helps :slight_smile:

Best Regards,
Support

3

Hi,

Thanks for your help!

The space under the header and above the footer are all gone.

However, the working white area isn’t stretched fully. If you take a look at my about us page, there’s still some grey part on the right side of the page - how do I go about removing it completely - I need the working space all white just like my homepage

Hope to hear from you

Ray

4

Hey there,
Hope you’re doing well today

Kindly add and save the following code to Appearance > Customize > Additional CSS:

@media (min-width: 1200px){
.container {
    width: 100%!important;
    padding-left: 0px!Important;
    padding-right: 0px!Important;
}}

I hope this helps :slight_smile:
Best Regards,
Support

5

Hi,

Thanks for your quick response and help.

I added the code you sent. Unfortunately, it also changed the format of the blog post appearance - which I wanted to maintain to its original style - I only needed changes for the about us page and contact us page.

Let me know if the original style of the blog section can be retrieved

Thanks

Ray

6

Hi there,
Thanks for keeping in touch with us.

Sorry about that, please replace the code given previously with this one:

@media (min-width: 1200px){
.page-id-31 .container, .page-id-34 .container {
    width: 100%!important;
    padding-left: 0px!Important;
    padding-right: 0px!Important;
}}

Please let me know if that works.

Best Regards,
Support

7

Hi,
Sure, it worked.

Thanks, and your help is always appreciated.

Ray

8

You’re most welcome. :slight_smile:

9

Can you give the correct code for removing the extra space for the entire Sparkling site. I have a child theme in place and want to remove space between header and main content and between main content and footer.

Thank you.

10

@sydneyjbg To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/sparkling/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

11

Hi There,

Sorry, I will have to ask this again.

I have created another page on my website, and I’ll still need to remove the space under the header and above the footer.

Here’s the page - Planet88.club

Let me know any additional code that I can add to the existing one to remove that or any new code.

Thanks

Ray

12

Please change the above shared code as following to make it work on your shared page.

.page-id-2965 .post-inner-content,
.page-id-31 .post-inner-content,
.page-id-34 .post-inner-content {
    border: none!Important;
    padding: 0px!Important;
}

.page-id-2965 .main-content-area,
.page-id-31 .main-content-area,
.page-id-34 .main-content-area {
    margin: 0px!Important;
}

.page-id-2965 header.entry-header.page-header,
.page-id-31 header.entry-header.page-header,
.page-id-34 header.entry-header.page-header {
    display: none!Important;
}

.page-id-2965 .main-content-inner.col-sm-12.col-md-12,
.page-id-31 .main-content-inner.col-sm-12.col-md-12,
.page-id-34 .main-content-inner.col-sm-12.col-md-12 {
    margin-top: -21px!important;
}
13

Hi Movin,

Thanks for your help!

I deleted the previous code and included the one you sent - it worked perfectly well in removing the space under the header and above the footer. I just have one more thing that I may have forgotten to mention - the working space (the white space area is back to normal, but I need it full length for the mentioned pages.

Any update on the code which will make the white space cover the whole page would be appreciated (I just don’t want the grey spaces - I need it white)

Also, this should only be applicable to the pages below, and not the blog section - Our story, what makes us different, and contact us pages)

Here’s the website again - flyfishingspotter.com

Hope to hear from you

Ray

14

To achieve it use the below custom CSS code.

.page-id-2965 #content,
.page-id-31 #content,
.page-id-34 #content {
    background: #fff;
}
15

Hi Movin,

Thanks, it worked perfectly well.

Thanks

Ray

16

You are most welcome here :slight_smile:

17

Hi Movin,

The codes worked perfectly, and I always appreciate your help

Just need one more thing…

I still see a tiny space (very tiny) under the header on these pages below on my website. I use siteorigin page builder to create the pages, and I’ve tried adding padding to the images but the tiny space still doesn’t go away.

Please, let me know if there’s a code I can use to do away with the space

Here are the pages
http://www.flyfishingspotter.com/what-makes-us-different/
http://www.flyfishingspotter.com/about-us/
http://www.flyfishingspotter.com/contact-us/

Hope to hear from you
Ray

18

I see the space only on this page Planet88.club and you can remove it using following custom CSS code.

body.page-id-31 .entry-content {
    margin: 1.3em 0 0;
}
19

Great, thanks

20

You are always welcome here :slight_smile: