[Resolved] reduce space under header above footer and lower social media buttons

[Jim]

I am using a page builder and I set the color the background of my row and widget to red but I have a white space below the header/menu and above my footer. How do I get rid of that so that I have an entire middle section of red or whatever color I choose? Also I like to lower the two social medial buttons so that they end up in my footer. Here are two picture of what I have now.

https://postimg.org/image/7qodeivhv/

https://postimg.org/image/yps89ohyr/

[Leo]

Hi Jim.

Can you disable maintenance mode again so we can see where the white space is coming from?

For social media icons, have you try using Tom’s Lightweight Social Icons plugin? You can place them in footer widget.
https://en-ca.wordpress.org/plugins/lightweight-social-icons/

Let us know.

[Tom]

Do you have the full width content option checked in the Page Builder Integration meta box?

[Jim]

I have added the the lightweight social icon widget to my page but the icons are still not in the footer area. They are just above it on the left where I’d like them to be. Also do you know where the setting is to change the social media icons? I don’t want the youtube one to be blue. I’d rather it be red like the regular youtube icon. I check marked the Page builder integration box and it took some of the space away but not all of it. I have disabled the maintenance mode for now also.

[Leo]

Try this CSS to remove the white space:

.entry-content {
    margin: 0px;
}

Do you want the icons in the copyright area? If so I’d recommend using GP’s built in Font Awesome Library.
http://fontawesome.io/icons/

For example, you can enter something like this in Customizer > Copyright:
<a href="your link here"> <i class="fa fa-facebook-square fa-3x"></i></a>

Then you can change the color in Customizer > Colors > Footer > Link/Link Hover

Let me know.

[Jim]

Having the Social Media links in the copyright area would be ideal but I wouldn’t know where to begin wrting the code for something like that. Can you help me with this? I’d like the icons to be next to each other like they are now but in place of the copyright. I have pictures I can use as icons. My Page URL is https://www.facebook.com/jimturnpaughmagic/ and my Youtube site is https://www.youtube.com/channel/UC3UCO0TUL-rmr_Y7kmGvtGA . The css code you gave me fixed the upper margin area but not the lower area. Thank you again for your help.

[Leo]

For social media icons:
– Copy following into Customizer > Copyright:

<a href="https://www.facebook.com/jimturnpaughmagic/"> <i class="fa fa-facebook-official fa-2x"></i></a>
<a href="https://www.youtube.com/channel/UC3UCO0TUL-rmr_Y7kmGvtGA"> <i class="fa fa-youtube-square fa-2x"></i></a>

– Customizer > Layout > Footer > Footer Padding. Set to 5 0 5 0.
– Modify icon colors in Customizer > Colors > Footer > Link & Link Hover
– Modify icon size in Customizer > Typography > Footer > Footer font size

Then go to Customizer > Layout > Footer > Footer Widgets and set to 0 to remove the white space.

Let me know.

[Jim]

You guys are great thanks again for all your help. This fixed all the issues I was having.

[Leo]

You’re welcome!

[David]

For future reference, this seems to eliminate the space below the header for all device sizes:

.entry-content { margin-top:0px; }
#content { padding-top:0px; }

Without the CSS for #content, the white space reappears on tablet and mobile devices.

[Tom]

Content padding is applied to #content when using the One Container layout.

Thanks for posting the code! 🙂

[Author]

Posts