Reduce footer height

Support
#1

Hi Guys,

Would you be able to provide the CSS code to control or reduce the footer height please?

Thanks a million

#2

Hello @billy.rooney,

Thanks for asking. :slight_smile:

Please add following CSS under X > Theme Options > CSS to change footer height:

footer.x-colophon.top {
    padding: 30px 0;
}

You can change the values (30px) as per requirement.

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#3

Hi,

Thanks so much for the reply but that code didn’t work, would the fact I’m using a child theme affect the code?

#4

Hi There,

I have checked your custom CSS rules and you had some CSS syntax errors which I have fixed. Now your custom CSS should parse correctly.

Make sure to clear your browser cache and check your site.

Thanks!

#5

You are a gentleman, thank you so much. Such great support with you guys.