Currently, I am utilizing Bootstrap 3 with a fixed width set-up.
The footer on my site consists of two columns, each with a different background color. In order to ensure that the content in the footer aligns properly with the rest of the website, I want it to be enclosed within the '.container' tag.
Here lies the issue I am struggling with:
I aim to create the illusion that the footer spans the full width of the page. This means one side should have one color and the other side should have a different color outside of the '.container' area.
Additionally, when the screen resolution decreases below a certain point, the two columns should stack vertically while both maintaining their full-width background colors.
To clarify further, please refer to this image: picture
My initial idea was to use a background image within the '.container-wrapper' element, and then switch to a different background for mobile devices aligned from the center:
CSS
.color {
background:url(img/test-bg.jpg);
background-repeat:repeat-y;
background-position:center; }
@media (max-width: 992px) {
.color {
background:url(img/test-bg2.jpg);
background-repeat:repeat-x;
background-position:center; }
}
HTML
<div class="fullwidthcontainer color">
<div class="color-left" style="background:#cfcfcf; height:100%; width:100%"></div>
<div class="container">
<div class="row">
<div class="col-md-8" style="background:#feff8b;"> <br/><br/><br/> <br/><br/><br/> </div>
<div class="col-md-4" style="background:#8bd7ff;"> <br/><br/><br/> <br/><br/><br/> </div>
</div>
</div>
Visit this link for a functional example, scroll down
This setup works smoothly on desktop, however, on mobile devices, the design only works if the two columns are of equal height. I would prefer the heights to vary but am unsure how to achieve this. Any suggestions?