Footer height

Quick update, if you look at the site now it no longer visually reflects the issue I am trying to address. I was able to space it out how I wanted but I feel like my method was a very round about way to do it. There is probably a correct way of doing it and I would like to know what that is still.
What I did was add an image widget (previously using no widgets in the footer) and used a transparent gif with the dimensions of 7 x 200.
This can’t be the proper way of accomplishing this, right?

Hey,
Your image doesn’t seem to be cut off? You footer container is actually bigger than the image. What browser are you using?

Hannah

Sorry, didn’t see your second post.
So before had you added the image as a background image (Theme Options > Advanced Styling)? And that’s what wasn’t working?

I can change it back temporarily. The options under advance styling for the footer are only image, repeat, and placement. No Height and as you can now see, it crops the top and bottom.
BTW, this is a friends site that I am helping with (he actually turned me on to your themes and I went with Pinnacle Premium). I have been constantly encouraging him to go premium as well for many reasons but mainly for the awesome support you guys give. He will cave soon ??

I have a feeling it may relate to the image’s original size, it is way bigger than it needs to be BUT a) it is the same width as the header which is fitting fine and b) he said he has already played around with different dimensions so I did not explore that option.

so I’m clear you would like to set a height for the footer? Correct? And you want the background image to always cover?

You can use css like this:

#containerfooter.footerclass {
  min-height: 275px;
  background-size: cover !important;
}

Kadence Themes

That worked pretty good. Thanks! One more question tho. How do I get it (and the header) to resize in the mobile version or even just in a smaller window on a computer? With my other site I have widgets in the footer that resize well, and my header is just a background image so when it cuts some off it is not an issue. This sites header and footer image have text and logos incorporated into so when they get cut off, you can no longer read it.

Sorry for the delay.

Your header, you can force the background image to be inside the box with css like this:

header.banner.headerclass {
background-size: contain;
}

Because it’s a background image through it’s not going to create a relationship where it changes the size of the box.. Have you though about making the image your logo instead of the background image?

In the footer you can play around with a media query to change the height setting based on screen size.

Say like this for example:

#containerfooter.footerclass {
  min-height: 275px;
  background-size: cover !important;
}
@media (max-width: 767px) {
footer#containerfooter {
    min-height: 60px;
     background-size: contain;
}
}

All in all background images are usually best to not hold important information and you might look at just adding the logo as one image in a widget and setting the background to the color yellow.

Kadence Themes