Footer background color on posts page

sage
1

Hi, I am having an issue with my footer background pushing up a background image I have set in the footer container. On the regular pages the footer sits nicely under the content. How can I get the footer to behave on the posts’ page?

Many thanks!

Jonathan Root

Screen Shot 2015-12-21 at 7.32.14 PM.png1956×2018 705 KB

2

Did you the footer inside templates/footer.php?

1 Like
3

Hi! Yes, Thanks for the reply. When I resize the the browser to tablet size the footer and stack order works well. It’s on larger viewports that things break apart…

Screen Shot 2015-12-21 at 11.00.49 PM.png1496×2334 452 KB

4

Seems a simple CSS issue. Can you post your scss related to footer and footer container?

1 Like
5

Ok great, here is what I have in the scss file

footer {

h1, h4, h5 {
color: $footer-text;
}
.container-fluid {
background-color: $footer-color;
padding: 3em;
}
}
.join-us-bg-image {
background:
/* top, transparent /
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
/ bottom, image */
url("…/images/construction-main.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
max-width: 100%;
height: 399px;
margin: 0 auto;
padding-top: 2em;
padding-bottom: 2em;
}
h1, h4 {
color: white;
}

Screen Shot 2015-12-22 at 5.17.16 PM.png2770×2450 223 KB

6

Hard to tell, but looking at your markup there it looks like your footer is inside of the main wrap.

If it is, it shouldn’t be in there - with Bootstraps grid you shouldn’t have a .container inside of a .container - same goes for .container-fluid

Whether using container, or container-fluid, the basic structure should be like this -

<header>
    <div class="container">
        stuff...
    </div>
</header>

<div class="wrap container-fluid">
    <div class="content">
        stuff...
    </div>
</div><!-- / wrap -->

<footer class="content-info">
    <div class="container-fluid">
        stuff....
    </div>
</footer>

From what I can see in your screen shot, it looks like you have this -

<div class="wrap container-fluid">
    <div class="content">
        stuff...
    </div>
<!--shouldn't  a closing div be here?
to close out your .wrap .container -->

    <footer class="content-info">
        <div class="container-fluid">
            stuff....
        </div>
    </footer>
    <script>....</script>

<!-- your screen shot ends here - 
where is that closing tag for .wrap .container?
If it's down here, it doesn't belong down here.
It it's not down here, you need to add it.
But, not down here.
-->
1 Like
7

Hi, Thanks for the reply. I’m under the impression that I’m following those rules. I did find an ending div in my index file which I erased but I’m still getting the background of the footer on content-single pages to push up and cover the page.

Here is a link of a zip of my theme files. Would you take a look and let me know what you think? It is for a nonprofit and I will be happy to cite your help.

Thanks!

Jonathan

8

I see you have a <div class="row join-us-bg-image"> outside of footer element and this .row is not inside some .container or .container-fluid

Bootstrap rows must be inside containers. Maybe you can check it.

1 Like
9

Thanks! For some reason I was under the impression that it would be included in the base file’s wrapper, but I think i still might not be understanding the theme’s hierarchy.

That was one of the things I was trying to fix the issue, but I digress.

10

FOOUND IT! Thank you both for your continued support. I had a div in my base file. Not sure how it got in there! Must have been a late night, lol

1 Like