Grid system doesn't resize properly on mobile devices or small screen

Question

Command col-xs-whatever doesn't work and makes break lines on mobile view or small screens.

Note: I also tested the class .col- as Bootstrap 4 specifies in the documentation but it still doesn't work.

It doesn't resize properly and pile up, here is the relevant code:

.navbar{
    background-image: cornflowerblue;
}
#mainNav{
    border: 5px solid black;
    margin: 3%;
    background-color: white;
}
body{
    background-color: grey;
}
#navContent{
    background-color: white;
    margin: 3%;
}
#final{
    border: 5px solid black;
    margin: 3%;
    background-color: white;
}
#searchFormContent{
    margin: auto;
    width: 80%;
}
#navToggler{
    float: right;
}
.navbar-toggler{
    float:right;
}

vitjbr · Accepted Answer

I don't know if this is your desired outcome as you did not specify.

I changed col-xs-whatever to col-whatever after that you were applying margin and border on a row with CSS applied to #mainNav that is why all columns could not fit inside.

So I moved row in a wrapping nav and removed row from #mainNav

Here is changed code:

.navbar{
    background-image: cornflowerblue;
}
#mainNav{
    border: 5px solid black;
    margin: 3%;
    background-color: white;
}
body{
    background-color: grey;
}
#navContent{
    background-color: white;
    margin: 3%;
}
#final{
    border: 5px solid black;
    margin: 3%;
    background-color: white;
}
#searchFormContent{
    margin: auto;
    width: 80%;
}
#navToggler{
    float: right;
}
.navbar-toggler{
    float:right;
}

Grid system doesn't resize properly on mobile devices or small screen

Answers (2)

Related Questions

Grid system doesn&#39;t resize properly on mobile devices or small screen

Answers (2)

Related Questions

Grid system doesn't resize properly on mobile devices or small screen