Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
I’ve been through all of the Theme / Customize settings a few times and I couldn’t find a way to adjust the footer to make it less high. I also looked through the Style.css file. Can someone help? Thanks!
Hi, thanks for posting. Please, see: Thread: Reduce the Vantage footer size
Thanks SO MUCH! I apologize for missing the thread. I’ll try this shortly.
I assume it’s going to work, so: RESOLVED.
Hello, Andrew! Thanks for the reply.
I followed the directions in the link you provided. I downloaded the Custom CSS plugin, copied the exact code provided in your post, being careful not to leave out any characters, and pasted it into the custom CSS area. I clicked on the "Update" button and refreshed the site in a different browser tab. No change. I changed the number from 500 to 100 and updated, then 800 and updated, and each time when I refreshed the site in the other browser tab, there was no change in the footer size. I then deleted the text and tried the whole process again, in case I made a mistake. No change. Any ideas?
Hi Dave
Do you have a public URL where we can take a look at what’s going on?
Sure thing. The URL is:
CoolMediaDesign.com/BNGtest
You'll notice that the text in the footer is bunched up as well. I'm less concerned about that, but would like to resolve it.
Thanks, in Custom CSS you have the following rule:
a { letter-spacing: 0px; white-space: normal; font-size: 15px; margin: -7px; padding: 0px; line-height: 0px; word-spacing: 0px; background-size: auto; }That targets all links and is the reason the text is bunched up. I don’t recommend using this rule as it’ll cause problems with links. If you need help, rather let me know what link, in particular, you were trying to edit/style and I’ll help make this rule more specific.
I don’t see any other Custom CSS besides this rule above. Try adding to your Custom CSS the following:
#content { min-height: 800px; }Thanks for finding the CSS letter spacing stuff. I excised it and it fixed the text bunching issue. I'm brand new to WordPress and I inherited this site.
I added the CSS code you suggested for the footer (and left it in this time for you to see) but there's no change. Could it be because of the "back to top" hotspot?
Dave Caruso I looked for that under "Appearance / Customize / Theme Design / Footer, and also under the Widget Footers, and I can't find where that hotspot exists.
The CSS is working as expected. Are you on a really big display? If so, you can make the min-height: 2000px to see the effect. Alternatively, head back over to Thread: Reduce the Vantage footer size and use the second method I suggest there which is to change the background color so you can see where the footer ends.
Here you can see the CSS working as expected: https://imgur.com/a/vfUxVdY
The reason the back to top arrow isn’t showing is CustomizeTheme DesignScroll to Top Background is set to white, if you set that back to default, the scroll to top arrow will show normally again.
It's possible I'm using the word "footer" incorrectly" with regard to the template. I loaded your link and can see exactly what you're saying. When I make that number in the custom code bigger, there is more "page" to be seen above the lowest, dark gray area. But I'm trying to shrink the height of the dark gray area, where the SiteOrigin logo is, not the page above it. And I also want to change the "back to top" hotspot to something not so tall and something that is labeled for what it does.
The footer takes up whatever space is left below your content and the bottom of your screen. Increasing the page content height decreases the size of the footer. Does that make sense? Alternatively, please see the other option provided here: Thread: Reduce the Vantage footer size and change the body background color so you can see clearly what is the footer and what is the body background color. Please read that thread to understand what we’ve done here in terms of the body background color being the same color as the footer background color.
If you want to decrease the padding in the footer, add the following to Custom CSS and adjust the values as required:
.layout-full #colophon { padding-top: 10px; padding-bottom: 10px; }The back to top button only has the options you can see at CustomizeTheme DesignFooter. For further options, you’d need to go to CustomizeTheme SettingsNavigation and disable Display Scroll To Top and then seek a third-party back to top button plugin with more options.
Padding might just be what I'm after. I'm attempting to paste the code you provided me into the Custom CSS, but when I try to paste, a list pops up, asking me to choose a category, and I don't know what to select.
Perhaps check that you aren’t in the Visual Editor. AppearanceCustom CSS is all you need, you don’t need to be in the visual editor to write, edit or paste new rules.
Thanks for your infinite patience, Andrew. That worked. I’ll be taking a CSS class soon. Thanks again. Resolved.
Super, glad to hear you’ve made progress. CSS is relatively easy to learn and infinitely handy if you’re working on websites.
All the best :)