Reduce the height of Footer1 new code needed

I want to reduce the height of Footer1. This code of yours from Oct 2017 does not work:

.footer-widgets.widget-area .widget {
margin-bottom: 0;
padding-top: 15px;
padding-bottom: 15px;
}

#text-5 p {
margin-bottom: 0;
}

Hello,

First thanks for using our Sydney theme!

Please try with the given custom CSS code below at Appearance > Customize > Additional CSS:

.footer-widgets.widget-area .sidebar-column:nth-child(1) {
	height: 400px
}

/* Mobile */
@media only screen and (max-width: 991px) {
    .footer-widgets.widget-area .sidebar-column:nth-child(1) {
		height: 400px
	}
}

Change the value of “height” as per your needs.

If even so this custom CSS code does not accomplish with your need, please share with us a link/URL from your website, so we can do a inspection and send the best custom CSS code for you.

We hope this helps!

Kind Regards,

Rodrigo.

aThemes Support

Hi Rodrigo, your code does not work. In any case should there not be a ; after 400px?

But this seems to work:
.footer-widgets {padding: 10px 0 0 0 !important;
height: 40px;}

I see you added code for mobile; do I need to expand on the code above?

Thanks for your help, best wishes

Hi Rodrigo
Unfortunately the solution made the site-footer grow in height! It’s about 150% taller. If I set a height for site-footer, it does reduce it but leaves the text outside at the bottom. Can’t figure out where I am going wrong. The site is at www.enigmar.net
I’ll leave the following code in place should you want to inspect the site:

/reduce height of footer widget/
.footer-widgets.widget-area {padding: 5px 0 0 0 !important;
height: 35px;
}

Thanks again

Hi,

Try disabling that code and replace it with this one:

   .footer-widgets.widget-area p {
       margin-bottom: 0;
   }

Let me know how it goes.

Regards,
Kharis
aThemes Support

Many thanks for all your suggestions. I really appreciate it.
1] So far the following DOES work:
/reduce height of footer widget/
.footer-widgets {padding: 5px 0 0 0 !important;
height: 35px;}

But this has one side effect: the site-footer gets TALLER. I have tried the following addition code in various combinations, but they have no effect:
1] #colophon.site-footer { padding-top: 7px; padding-bottom: 7px; }
2] .footer-widgets.widget-area .sidebar-column:nth-child(1) {
height: 400px
}

/* Mobile */
@media only screen and (max-width: 991px) {
.footer-widgets.widget-area .sidebar-column:nth-child(1) {
height: 400px
}
}
3] .footer-widgets.widget-area p {
margin-bottom: 0;
}
4] #footer-sidebar {
display:block;
height: 250px;
}

BUT I discovered that .site-footer class is the correct identifier:
.site-footer {
background-color: #1c1c1c;
line-height: 35px;
padding: 15px 0;
position: relative;
bottom: 0px;
width: 100%
}
I know because I changed the color to #708090 as a test and it did change the colour. But the rest of the lines had no effect. My guess is that the theme code is taking precedence, but I don’t know where to identify it, and over-ride it.

If you visit www.enigmar.net you will see I have made good progress with your help. I will live with the taller site-footer for now but would like to figure out how to reduce the height some day. Thanks again

Hello,

Great that you had some progress on it!

  1. For you current footer, here’s a custom CSS code that you can reduce the height even more:

    #sidebar-footer .widget {
        margin-bottom: 0 !important;
    }

  1. If you want help with a footer with various widgets inside, please create a version of your website with the widgets included and send us the link, so we can help with the exactly custom CSS code to reduce the height.

We hope this helps!

Kind Regards,

Rodrigo.

aThemes Support

Thanks, Rodrigo, your code helped to reduce the height of the site-footer by about 30%. That’s good.
1] When I added this additional code:
.site-footer {
height: 35px;
}
I got the site-footer smaller still, about the same height as the footer widget. This in terms of the background is the solution. However:
2] The text: Designed by… etc got left behind, appearing below in a white area. So I am thinking the final fix will be to figure out how to move the text up so it is back in the black bar. I’ve left the code out for now as I don’t want visitors to www.enigmar.net to see what would be a mess at the bottom.

Really appreciate your time, best wishes

Hello,

Great that the code help you a bit!

Unfortunately the only way to help you is doing a inspection in the website with the widgets inserted. If possible, could you replicate the website in a sub-folder or sub-domain in your server and then share the link with us ? So we can send the exactly custom CSS code you need.

I am not able to reproduce here, since I don’t know which widgets you are using and what’s the content size inside each widget.

Kind Regards,

Rodrigo.

aThemes Support

Hi Rodrigo,
Sorry I can see I am making it difficult for you. So I have added the code back:
.site-footer {
height: 35px;
}

and you can see at www.enigmar.net that it makes the black bar the size I want, but leaves the text presumably in the same place it was before.

Just to recap here is the full code placed in Custom CSS:

/reduce height of footer widget/
.footer-widgets.widget-area {padding: 5px 0 0 0 !important;
height: 35px;
}
/reduces from 3cm to 1.8cm/
#sidebar-footer .widget {
margin-bottom: 0 !important;
}

.site-footer {
height: 35px;
}

Best wishes

Hello,

Thanks!

That’s the issue, right ?

Please try just removing the custom CSS code below:

.site-footer {
     height: 35px;
}

That’s the reason of the issue.

Hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

I put that in so you can inspect the site and see how the text is too far below. If I delete it then the site-footer is too tall. I think you misunderstood me as I specifically want the site-footer to be 35px high. I have managed a partial fix by adding padding-bottom: 35px; as follows:

.site-footer {
height: 35px;
padding-bottom: 35px;
}

There is plenty of advice for changing footer heights etc, but nothing about MOVING the text around. I want the text higher in the black box but I cannot figure out what code is preventing this.
Thanks

Hello,

Oh, right!

Please try with this custom CSS code:

.site-footer .site-info.container {
	transform: translateY(-9px);
}

This will move only the text container a bit to top.

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Hello, Rodrigo,
This has fixed it! Great.

There’s now just one thing that affects all browsers, desktops, mobiles etc. If you shrink the display width, the text in Footer 1 grey area drops down onto the site-footer. See www.enigmar.net. Instead, do you have code that makes the grey area expand vertically to accomodate the text.
Many thanks

Hello,

Great! We are almost there!

Please try adding the given custom CSS code below at Appearance > Customize > Additional CSS:

@media only screen and (max-width: 767px) {
	.footer-widgets.widget-area {
		height: auto !important;
		padding: 19px 0 0 0 !important;
	}

	.site-footer .site-info.container {
		transform: translateY(-6px);
	}
}

We hope this helps!

Please try that and let us know if you need further assistance.

If you are satisfied with our theme and support, would be great if you leave your comment and rating in the offical WordPress Themes repository. That helps us a lot: [Sydney] Reviews | WordPress.org

Kind Regards,

Rodrigo.

aThemes Support

Rodrigo
You are brilliant! All fixed up. Thanks once again for all your help and such quick response.
All the best

Hello,

You are welcome!

If you are satisfied with our theme and support, would be great if you leave your comment and rating in the offical WordPress Themes repository. That helps us a lot: [Sydney] Reviews | WordPress.org

Let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support