Reduce whitespace in footer?

Hello,

You can add this code in your custom css section of the theme panel to reduce the bottom padding of the container:

.td-main-content-wrap{
padding-bottom:0;
}

Thank you!

You can also add this code for the purple space:

.td-footer-template-14 .td-footer-bottom-full{
padding-top: 0;
}

Thank you!

Hi,

I could remove the margin set there – https://www.screencast.com/t/I8leqn1QrBbw

But you also have some invisible titles there
– https://www.screencast.com/t/fBXaEyxC
These seem to have the same color as the background so they are invisible. I believe they take the color set here
– https://www.screencast.com/t/3Sh9MCYS8WsM
I could include a color change in the code if you don’t want to change the footer background or that setting
– https://www.screencast.com/t/kV5lLFQx

Use the codes if you wish, enter them in the phones section if you want them to apply only on phones
– https://www.screencast.com/t/IspRbg9j

.td-footer-bottom-full .td-pb-row>div {
margin-bottom: 0;
}
.td-theme-wrap .td-footer-bottom-full .block-title > span {
color: #ffd100!important;
}

Thanks

Those sections are predefined in the post template you use, so the about us text will have a title and the social links will have a title. This is where they come from
– https://www.screencast.com/t/jk1sHT1k

If you want to remove them you could remove the color code and let them be invisible like they were in the first place
– https://www.screencast.com/t/OStwFIeGp
The result would be the somewhat the same as with a display:none.

So initially it looked like this – https://www.screencast.com/t/Z1qWK9ale
The code removed the margins completely – https://www.screencast.com/t/SSCLy36Rg

Maybe remove only the top margin – https://www.screencast.com/t/FdUlOXkIMYV4 and leave the space between the email and socials.

Remove the previous code and enter this one

.td-footer-bottom-full .td-pb-row>div.td-pb-span3 {
margin-bottom: 0;
}

Remove the code that I provided for the margins initially (space), this one

.td-footer-bottom-full .td-pb-row>div {
margin-bottom: 0;
}

This code removed both these margins – https://www.screencast.com/t/SSCLy36Rg

Now the new one will remove only the margin below the logo, you said that you want some space between the email and social
– https://www.screencast.com/t/QFFXdC1KhUA
So the margin below the About us will remain – https://www.screencast.com/t/qcqEBG3uLX4

If none of this is what you want, remove all the codes provided in this topic and explain in more details how you want it to look. Make some screenshots so I can provide a more accurate solution.

The result should be like this using the intended codes only, the ones below
– https://www.screencast.com/t/bLh5xKR96BC

.td-footer-bottom-full .td-pb-row>div.td-pb-span3 {
margin-bottom: 0;
}
.td-theme-wrap .td-footer-bottom-full .block-title > span {
color: #ffd100!important;
}

You could check this guide for starters
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
The browser inspector tool is a powerful instrument, very helpful to analyze various website elements and also modify them if needed.

What extra line would that be exactly? I fail to see it, or anything wrong with that top part. I must be misunderstanding.

I understand now, you mean that padding. I was looking for an actual line, sorry for that.

That is a padding top set for the page
– https://www.screencast.com/t/rWRDNqKjF
By default that would be applying for the page, only with some CSS it can be removed
– https://www.screencast.com/t/BG5mhfPJ2Kb

.home .td-main-page-wrap {
padding-top: 0;
}

You can set any value (except negative) when using padding. Don’t forget to specify a measure unit (like px)

.home .td-main-page-wrap {
padding-top: 10px;
}