Responsive column

Question

I have a Wordpress site to maintain and am facing a responsive problem. I have 2 columns, "main content" and "sidebar":

<div class="col-md-12 col-xs-12">

<div class="row">

<div class="col-md-9 col-xs-12 col-sm-12 content">

<!-- CONTEÚDO PRINCIPAL -->

</div>

<div class="col-md-3 sidebar">

<!-- CONTEÚDO SIDEBAR -->

</div>

</div> <!-- .row -->
</div> <!-- .col- -->

The problem is that when the resolution is less than the main content continues with 9 looks, because it does not fill full width. For you to take a look http://vicporai.fatcow.com/ ... Texts should fill the width, such as the top 3 banners and post titles.

I THINK THE PROBLEM IS IN .row FOR WHEN I DISABLE THE width:100% IN THE ELEMENT INSPECTOR, IT SEEMS TO BE FULL...

I tried everything, but nothing helps. I am super late with the deadline of this site because of this "error"

Answer 1

So that the content of your site you use bootstrap occupy the entire width of the browser change class=container for class=container-fluid.

You put only one col for sidebar and 3 to content, will be disproportionate when the size is smaller since the md, xs and sm are pixel based.

Be sure that the HTML structure should basically follow this format

  <div class="wrapper">
        <div class="container-fluid">
            <div class="row">
                <div id="conhecimentos" class="col-md-8">
                </div>
                <div id="resumo" class="col-md-4">
                </div>
            </div>
        </div>
  </div>