WordPress.org

Ready to get started?Download WordPress

Forums

Yup, it's another "sidebar at bottom of page" thread. (21 posts)

  1. tvorm
    Member
    Posted 11 months ago #

    Hello,

    After many many hours trying to figure this out and searching through what seems like every related support thread, I have decided to ask for help.

    I'm using a modified Twenty-Twelve theme, and my developer has completely disappeared off the face of the earth. My problem, like many others, is that my sidebar is at the bottom of the page. I am sure that there are no </div> mess ups, and I think that the issue is somewhere in my CSS (no idea where).

    The site is here
    As you can see, categories and posts don't have this issue, but only pages do.

    I'm hoping to get this site up and running, but I'm just not able to battle this issue. I'll happily post any snippets you need. My knowledge of CSS is absolutely rudimentary.

  2. Pioneer Valley Web Design
    Member
    Posted 11 months ago #

    My experienced first thought is a (now) missing page template or that somehow each is not now using the page template that includes a sidebar (and it's CSS).

    Please test by modifying the associated page template of ONE page (not the font/home page) to another. If required apply to the rest.

  3. tvorm
    Member
    Posted 11 months ago #

    Hm, the only page templates I have are Home, default (the one that's screwing up), and "Demo Page Template". Not sure what that is, but it definitely doesn't improve things at all.

  4. Josh (WP Edit)
    Volunteer Moderator
    Posted 11 months ago #

    Are you using the Ultimate Tinymce plugin?

    How are you inserting your Google fonts?

    Also.. you have quite a few errors:
    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.playitfwd.ca%2Fget-involved%2Fvolunteer%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    Fixing those may help remedy the situation.

  5. tvorm
    Member
    Posted 11 months ago #

    I'll do my best to work on the errors.

    Not using the plugin, and to be honest - not sure how the fonts are being inserted. How do I check? Learning on the fly here.

  6. Josh (WP Edit)
    Volunteer Moderator
    Posted 11 months ago #

    Lol - well, usually from a plugin or a theme.

    I noticed one of the errors had to do with this... and I know when inserting Google webfonts... if using the improper code.. it will break the layout.

  7. tvorm
    Member
    Posted 11 months ago #

    I'll look into it, perhaps enlist the help of someone more experienced than I. Thanks! And will update later.

  8. tvorm
    Member
    Posted 11 months ago #

    Ok, I managed to fix up a few of the errors. The remainder are are all very similar and I can not for the life of me figure out what is actually wrong. Any insight would be appreciated, but I'm pretty sure they aren't the problem.

    I don't think that they're a problem because they are in the header, which is shared by all pages/categories/posts, including the ones that work. Feel free to put me in my place if I'm wrong, though. Are there any other ideas as to what could be causing this annoyance? Thanks a lot for this help!

  9. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 11 months ago #

    Whoa there! You need to resolve your last validator error. This is most likely the source of the problem.

  10. tvorm
    Member
    Posted 11 months ago #

    That's a new one. Let's see what happens... nadda.I still think the problem is somewhere in my CSS. I get the feeling I was left with an incomplete theme. I'll pastebin it if there is anyone kind enough to take a look :)

  11. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    Looks to me like the structure and/or CSS of that template may be messed up - and since it's using a grid-system of CSS, that can be complicated to change. The sidebar is outside the content section - so that would need to be different for it to work. Also, look at widths of the various elements.

    You might try using Firebug to look at the "good" and "bad" page structures of the HTML and CSS.

  12. tvorm
    Member
    Posted 11 months ago #

    Actually, I spent a good deal of time comparing the Category/Page/Post structures in Firebug yesterday! Despite all of their sidebars looking slightly different, I couldn't find any significant differences... and went over it with a fine-toothed comb. Though I was quite tired at the time, lol. I'll move the sidebar into the content section and see what happens

  13. tvorm
    Member
    Posted 11 months ago #

    Actually, hold on... how do I do that? From the page template?: http://pastebin.com/HfU17ADR

    It looks like the sidebar has it's own content section? Thanks...

  14. tvorm
    Member
    Posted 11 months ago #

    Bumpin again, if I get no biters I think I'll start a new thread :)

  15. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    Sorry, but these forum can't always provide extensive support for a custom theme - we don't know how they are coded or set up. I looked at your site several times and it looks pretty complicated - not at all similar to twentytwelve. Perhaps you need to consider hiring someone?

    http://jobs.wordpress.net/

  16. tvorm
    Member
    Posted 11 months ago #

    That's fine. Thanks for all the tries

  17. Peter_L
    Member
    Posted 11 months ago #

    I took a quick look. There seems to be something wrong with indeed the css grid. Your html has classes for 2 kinds of grid systems. The css for only one of these is present.

    Quick remark: I might be wrong on this. You might be using a grid system with a weird syntax.

    Solution. Not sure, this is quite a complex thing to resolve. You might want to double check if your theme is loading all the required css.

    There's another thing. In your bump post (http://wordpress.org/support/topic/narrowed-down-an-issue-with-my-sidebar-but-i-dont-know-how-to-fix-it?replies=1) you showed 2 examples, one working, one not. That's a fluke. Kind of an accident, the sidebar working is accidental, caused by the the content of the main column being just wide enough to let the sidebar fit next to it. If you add 2 words to the title (as an experiment): "Listen, download, and share recordings from our concerts" you'll see that the page lay-out breaks up in the same manner as your not-working page example does.

  18. Krishna
    Volunteer Moderator
    Posted 11 months ago #

    Is this page that does not have a side bar?
    http://www.playitfwd.ca/videos/recordings/

    I find it quite in tact (on Chrome and FF). Clear cache and try again.

  19. tvorm
    Member
    Posted 11 months ago #

    @Krishna, that was the page that worked.

    Thanks so much for that Peter! Just my luck that I'd be forced to figure out CSS by troubleshooting a complex issue. I don't quite get where the "2 grids" comes from though, what are the two grids? All I see is "small-12 large-9" "small-12 large-3", which i thought was the syntax for just one grid system. If you could point out what I should be looking for in some other stylesheets or something, that might be a step forward.

    One quick question - with the "fluke" in mind, would it be possible to limit the width of the page's content to the left of the sidebar so that the "fluke" is reproduced everytime? I'm not too worried about future functionality at this point. Thanks again for the feedback, if worst comes to worst I'll bring that awesome insight with me to a paid gig.

  20. Peter_L
    Member
    Posted 11 months ago #

    Grid systems are build up using 2 components: rows and columns. Your theme seems to be build up around the css framework Foundation wich has it's own grid. However, these classes 'small-12 large-9' are not foundation classes. Hence, there seem to be 2 different grid systems inside your theme. It's a mess. It's not well build.

    One quick question - with the "fluke" in mind, would it be possible to limit the width of the page's content to the left of the sidebar so that the "fluke" is reproduced everytime?

    Yes, that's what a css grid does.

  21. tvorm
    Member
    Posted 11 months ago #

    Oh. Lol. Thanks for the help, I'll keep fiddling

Reply

You must log in to post.

About this Topic