Docs

[davidferp]

Hello X-Team,

I would like to add some padding in the footer of my site so that ALL titles and widgets contained there are brought further to the bottom, leaving the footer background image in the same position (see attached picture). I’ve searched the forum but everything I find adds padding before the footer section and everything including the background image is affected.

Thanks a lot for your help!

[davidferp]

By the way, my staging site is http://2c1bl.wpstagecoach.com.

Thanks a lot for your help

[Rad]

Hi there,

Please add this CSS to Admin > Appearance > Customizer > Custom > CSS

.x-colophon.bottom {
    padding: 100px 0 0px;
}

Hope this helps.

[davidferp]

Hi,

Thanks a lot for the suggestion, that of course works but I seem not to be able to adjust the padding by changing the 100px to 50px for instance. Any suggestion on why that would be happening?

Thanks!

[Christian]

Your padding is already 50px (see attachment). I don’t see the code Rad gave though. Please check for syntax errors.

Thanks.

[davidferp]

Hi Christian,

Thanks a lot for reaching out. I should have explained the situation better in the first place. I added the code proposed by Rad within a media query enabled only when the screen width is smaller or equal than 479px (see below)

@media (max-width: 479px) {
  	
  .x-colophon.bottom {
    	background-image: url("http://2c1bl.wpstagecoach.com/wp-content/uploads/2016/12/2C1B_Responsive_Home_v5_480px_footer_tiny.png"); 
  		background-size: auto 257px !important;
  		background-repeat: no-repeat !important;
  		background-position: center bottom !important;
	}
  
	.x-colophon.bottom {
    font-size: 12px;
  	padding: 100px 0 0px;
  }
  
  .x-footer-social-title {
    font-size: 17px;
  }
  
}

My point was, if I change the 100px to, say, 50px, I don’t see any change… I guess I am doing something wrong? Any advice?

[Rue Nel]

Hello There,

Thanks for updating in! Since you have installed a caching plugin WP Super Cache, please clear your plugin cache before testing your site. This can cause all the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Hope this helps. Please let us know how it goes.

[davidferp]

Hi,

Thanks for the point, good catch. I thought I had disabled all catching plugging in my development site.
But unfortunately the issue remains. I add here some more information to better convey what I am trying to do.

So, without additional padding, the footer for screen widths narrower than 470px looks like the attached image “Screen_Shot_default.jpg”.

– “Screen_Shot_100px.jpg” -> With 100px padding, as you guys originally suggested, the background image appears in full and the content of the footer is mybe a bit too much to the bottom.
– “Screen_Shot_60px.jpg” -> With 60px padding, the background is partially cropped
– “Screen_Shot_10px.jpg” -> With 10px padding, the background is fully cropped

What I need is to be able to control the position of the footer content without affecting the background image.
I am aware that might be complicated.

Thanks a lot guys for the effort!

[Friech]

Hi There,

Thank you for the clarification, so you want the top padding to be in 50px or 60px but dont want the background-image to be crop. Please update your background-position to center top

background-position: center top !important;

Hope it helps, Cheers!

[davidferp]

Hi there!,

I updated to background-position: center top !important; as suggested and now I’ve more flexibility in choosing the paddig value.

Thanks a lot guys!

[Joao]

Glad to hear it,

Cheers

[Author]

Posts