Bootstrap Responsive Wordpress

Question

Good night, you guys.

I recently finished this blog: http://bloganacastro.com/ and everything is cool, in the mobile version I just have a little problem.

If you visit, you can see that the main column of the posts is smaller than the total page size. Otherwise, the mobile version works perfectly. I’ve tried some codes and I can’t solve them.

If you can help, I’m grateful!

Answer 1

This is happening because you remove the sidebar but don’t increase the content size. Probably your CSS rule should look like this:

@media screen and (max-width:1119px){
    div.sidebar.col-md-4 {
        display:none;
    }
}

Also change the width of the message column, so:

@media screen and (max-width:1199px){
    div.sidebar.col-md-4 {
        display:none;
    }

    div.conteudo.col-lg-8 {
        margin-right: 4%;
        width: 100%;
    }
}

Answer 2

Good morning, I saw that you set width for .sidebar.col-Md-4 and .conteudo.col-lg-8. The classes "col-*" already have size defined by Bootstrap, it would be right for you to follow this part of the documentation http://getbootstrap.com/css/#grid defining the classes of its elements for the different resolutions, for example . col-Xs- . col-Sm- . col-Md- . col-lg- . Looking at your code, I suggest removing the property width: 60% of .conteudo.col-lg-8 and adding the class. col-Xs-12 so that the content occupies all columns in resolutions <768px. to hide the sidebar you can follow http://getbootstrap.com/css/#Responsive-Utilities. I hope I’ve helped