enter image description hereI'm doing a school project, everything is done but the problem is when I resize the window to 800px which I set, the side-bar (I want it to be horizontally on the top) will occupy most of the page(vertically). whereas the side-bar in the desktop form is great, the size is what I want. definitely, it is because I use w3-mobile but I don't know any other way, Please help me out to fix it.
You can use media css. here is media break points
@media only screen and (min-width: 320px) and (max-width: 479px){ ... }
@media only screen and (min-width: 480px) and (max-width: 767px){ ... }
@media only screen and (min-width: 768px) and (max-width: 991px){ ... }
@media only screen and (min-width: 992px){ ... }
or
/* SMARTPHONES PORTRAIT */
@media only screen and (min-width: 300px) {
}
/* SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 480px) {
}
/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) {
}
/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) {
}