Footer When Sidebar is Present
-
Hello! I’m hoping there’s a way to center the footer under the left aligned post and/or page content when the sidebar is present. It looks great centered when the page is full (no sidebar), but off when sidebar is visible. Is this possible?
The blog I need help with is: (visible only to logged in users)
-
Could you try adding this to your custom CSS:
#site-generator { margin-left: 77px; }That should shift the footer over to the centre.
-
Reconfigured it a bit, but I think it’ll work. I centered it under the content. It’s pretty much aligned left, on a full page, but that seems to fit the theme’s cool offset look. If there’s a way to alter its location, depending on the page or post identity, I’d like to add that. Otherwise, I dig it. Thank you, Kathryn!
-
Ah, I think I understand better what you were trying to do in terms of centering – I thought you were trying to better center it across the whole page width, but I see now what you did, that makes sense.
If there’s a way to alter its location, depending on the page or post identity, I’d like to add that.
You can definitely target CSS based on the page, post or template being used – I can help with that. For example, if you’d like to apply the CSS only to pages using the default template, you would do this:
.page-template-default #site-generator { margin-right: 206px; }Let me know if that does the trick. I spot-checked your site but couldn’t find a page without a right sidebar. :)
-
I had to remove what I had done, based on what it did to the mobile view. Is there a way to limit the style sheet to the desktop view, and leave the mobile as the default? It centers nice on mobile, as is. The pages without the sidebar are safety related. The Safety First sign top image’s linked page, and any products Material Safety Data Sheets. I did make the full page use pretty specific. Sorry, I forgot to mention that. :)
-
Is there a way to limit the style sheet to the desktop view, and leave the mobile as the default?
For sure – you can do that by wrapping the CSS declaration in something called a media query to restrict it to a certain screen size. For example, to limit it to screens over 880px wide (the theme’s desktop “breakpoint”):
@media screen and (min-width: 880px) { .page-template-default #site-generator { margin-right: 206px; } } -
Ah! I have that code, in part, from another CSS customization. Could’ve put that together, just didn’t realize I had the pieces. :) Thank you!!! Happy Holidays!!!
-
-
-
Hey, Kathryn. I see that the CSS code isn’t affecting the site generator info on posts. I tried a duplication of the last code, with “post” in place of “page”, but nope. Lol..Here’s an example, at the following page’s bottom: http://hudsonchemicals.com/2015/11/17/extremely-powerful/
-
Good point! You’re very close, but the class for single posts is
single-post— this should do it:@media screen and (min-width: 880px) { .page-template-default #site-generator, .single-post #site-generator { margin-right: 206px; } }The comma between the two selectors applies the same margin to both.
-
-
If I knew all of the defining verbiage, I probably wouldn’t bother you guys so much! I appreciate your patience, with my many questions.
-
No worries, we’re here to help!
If you’re interested in learning more about CSS and how to target the right elements to tweak them, here are some of my favourite resources:
http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
-
OMG don’t hate me..I just found it’s still offset on search results, category archives and other instances where the sidebar shows up.
-
I will definitely look into those resources. If you could help me right this last one though, I would appreciate it.
-
Is there a way to make it so that any time the sidebar is visible, the site generator info shifts over?
-
I have another idea. :)
Why don’t we set the right margin to 206px everywhere – and then reset it to 0 just for pages with the full-width template applied.
@media screen and (min-width: 880px) { #site-generator { margin-right: 206px; } .page-template-full-width-page #site-generator { margin-right: 0; } } -
-
- The topic ‘Footer When Sidebar is Present’ is closed to new replies.