dmikester1 dmikester1 - 1 year ago 97
CSS Question

Part of footer is getting hidden

I am working on a developing a site for my company. I am stuck on one issue where the layout is not working correctly. The footer at the bottom is partially being covered. I have added a z-index and it changed nothing. I have played with margins and paddings to no avail. Hopefully someone can see what is causing it to be partially covered.
Here is an image showing what I see:
enter image description here

And the website is here:

#slide03.slide .footer-container {
background-color: #06060d;
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
margin-bottom: 0;
text-align: center;
#slide03.slide .footer-container .wrapper {
background-color: #06060d;
bottom: 0;
color: #ffffff;
left: 0;
margin: 0 auto -20px;
padding-top: 5px;
position: absolute;
text-align: center;
text-shadow: none;
top: auto;
transform: none;
width: 100%;

<div class="footer-container">
<footer class="wrapper">
<img src="" class="center-block" width="80" />
<h3> is affiliated with <a href="">Club's Choice Fundraising</a>.

Answer Source

It's actually nothing to do with your CSS as @Bart helped me notice.

at around line 200 (of your HTML) you have this;

    <script type="text/javascript">

        $(document).ready(function () {
            $(".contactForm").on('submit', function (e) {
                var firstName = $("#firstName").val();
                if (firstName == "") {
                    firstName = "None given";
                var model = { firstName: firstName, schoolName: $("#schoolName").val(), note: $("#note").val() };

                    url: "/Home/Index",
                    type: 'POST',
                    data: { model: model },
                    success: function (result) {
                        if (result) {
                            $("#formMessage").html("Thank you.  Your entry has been submitted.");
                    error: function (xhr, ajaxOptions, thrownError) {



as you can see after the close script tag there is a stray > that is the cause of your problems.

Also margin: 0 auto -20px; should be margin: 0 auto; as @Tezekiel said

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download