[help] Footer issue on Doug Coupland Tribute Page

[help] Footer issue on Doug Coupland Tribute Page
0

#1

Hey everyone!

I’ve built my tribute page and am quite happy with it, except for a nesting div issue with my footer. I’ve traced and matched my divs, but my footer appears to be included in the right sub-section of my page, not stretching completely across the bottom, as I would like.

Anyone with sharp eyes willing to take a look?

Thanks in advance!
Shirley


#2

I’d like to examine your code, but I don’t have the time right now :slight_frown:

You seem to have a lot of unclosed tags in your HTML, which makes it hard to determine where to move the footer to achieve the desired effect. I recommend you switch your editor’s theme to Oceanic Dark, as it also highlights out-of-place tags in your code. You can find it in your account settings, in the Editor tab.


#3


I used the chrome dev tools via right-click ‘inspect element’ to find where the footer was nested.
I moved your footer code outside 2 more div lvls, added footer tags for kicks (see the pun lol) :wink: and added a col class to the footer. I am by no means an expert so there will likely be many more responses that have better suggestions than mine. But for now, at least the footer looks the part :smiley: Great looking site by the way! you probably were just working on it too long without a break. Keep up the good work!

Happy coding!


#4

Thanks for the reminder about the Chrome dev tools. D’oh! Hadn’t occurred to me to use them on a page within CodePen. Also didn’t realize that I would need to add a col class within the footer.

Thanks for the assistance and the pointers!


#5

Final followup:

I ended up copying my markup and content out to Sublime Text and carefully matching and then checking my nested divs.

Was able to correctly pull out the footer outside of the container with my main content (added one closing div tag).

A bit of fiddling with the CSS and I have a page I’ll let stand.