dmikester1 dmikester1 - 4 months ago 14
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: http://clubschoicemagic.com/



#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="http://clubschoicefundraising.com/Content/img/logo.png" class="center-block" width="80" />
<h3>
Clubschoicemagic.com is affiliated with <a href="http://clubschoicefundraising.com">Club's Choice Fundraising</a>.
</h3>
</footer>
</div>




Answer

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) {
                e.preventDefault();
                var firstName = $("#firstName").val();
                if (firstName == "") {
                    firstName = "None given";
                }
                var model = { firstName: firstName, schoolName: $("#schoolName").val(), note: $("#note").val() };

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

                    }
                });

            });
        });
    </script>
>

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

Comments