I am having a Bootstrap one-page website, which uses a full-screen background. All content should be contained within the visible screen without having to scroll; i.e. I want to exactly position different elements with a fixed position.
I am currently stuck while trying to fix a container containing 3 equal columns. When I am fixing the container and position it 70px above the bottom, the columns move to left instead of keeping the natural centered position:
HTML
<div class="container front-page-widgets">
<div class="row">
<div class="col-md-4">
<?php if ( dynamic_sidebar( 'front-left' ) ); ?>
</div>
<div class="col-md-4">
<?php if ( dynamic_sidebar( 'front-center' ) ); ?>
</div>
<div class="col-md-4">
<?php if ( dynamic_sidebar( 'front-right' ) ); ?>
</div>
</div>
</div>
CSS
.front-page-widgets {
position: fixed;
bottom: 70px;
}
Would appreciate your advise how to keep the natural container layout while fixing the container to the bottom.