Good night, guys.
Recently I finished this blog: link and everything is cool, in the mobile version I only have one problem.
If they access, they will see that the main column of the posts gets smaller than the total size of the page. Moreover, the mobile version works perfect. I have tried some codes and I can not solve them.
If you can help, I'm grateful!
Good morning, I saw that you defined width for .sidebar.col-md-4 and .conteudo.col-lg-8. The "col- *" classes already have a size defined by Bootstrap, the right thing to do is to follow this part of the link documentation, defining the classes of its elements to the different resolutions, for example .col-xs- .col-sm- .col-md- .col-lg-. Looking at your code, I suggest you remove the width property: 60% from .cont.col-lg-8 and add the .col-xs-12 class so that the content occupies all the columns at resolutions
This is happening because you remove the sidebar but do not increase the size of the content. Probably your CSS rule should look like this:
@media screen and (max-width:1119px){
div.sidebar.col-md-4 {
display:none;
}
}
Also change the column width of the messages, thus:
@media screen and (max-width:1199px){
div.sidebar.col-md-4 {
display:none;
}
div.conteudo.col-lg-8 {
margin-right: 4%;
width: 100%;
}
}