Unresponsive Page on Responsive Site

HTML & CSS
1

See: http://nickconley.com/LiquidWinter/resources/integration

My website uses the flex-box “holy grail” layout. It’s all going along pretty well, however on this particular page the content is stretching the page beyond with width of the view portal, and does not resize. The issue has something to do with the sidebar I’m sure, but I cant identify what it is.

Once the page hits the CSS break at 768px, it’s fine, so only the desktop version is bugged.

The sidebars are written to be flexible and appear only when needed. This page uses both left and right sidebars and works perfectly: http://nickconley.com/LiquidWinter/features

Any advise would be greatly appreciated.

2

You have an element called .container which is nested in the left column and has a width of 1170px which is breaking the layout.

@media (min-width: 1200px)
.container {
    width: 1170px;
}

Remove the container class from that element and the rest should line up.

<div class="container"> 
    <div class="row"> 
        <div class="col-sm-6 col-md-4"><p>Box 1</p></div> 
        <div class="col-sm-6 col-md-4"><p>Box 2</p></div> 
        <div class="clearfix visible-sm-block"></div> 
        <div class="col-sm-6 col-md-4"><p>Box 3</p></div> 
        <div class="clearfix visible-md-block"></div> 
        <div class="col-sm-6 col-md-4"><p>Box 4</p></div> 
        <div class="clearfix visible-sm-block"></div> 
        <div class="col-sm-6 col-md-4"><p>Box 5</p></div> 
        <div class="col-sm-6 col-md-4"><p>Box 6</p></div> 
        <div class="clearfix visible-sm-block"></div> 
        <div class="clearfix visible-md-block"></div> 
        <div class="col-sm-6 col-md-4"><p>Box 7</p></div> 
        <div class="col-sm-6 col-md-4"><p>Box 8</p></div> 
        <div class="clearfix visible-sm-block"></div> 
        <div class="col-sm-6 col-md-4"><p>Box 9</p></div> 
        <div class="clearfix visible-md-block"></div> 
        <div class="col-sm-6 col-md-4"><p>Box 10</p></div> 
        <div class="clearfix visible-sm-block"></div> 
        <div class="col-sm-6 col-md-4"><p>Box 11</p></div> 
        <div class="col-sm-6 col-md-4"><p>Box 12</p></div> 
    </div> 
    </div>

Container elements in bootstrap are 1170px wide so you can’t nest them inside elements that are not full width. It should probably be .container-fluid instead of ,container.

1 Like
3

I love you Paul.

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.