I have a couple of issues with my CSS, I am currently using W3.CSS library to build a basic responsive website, I have media queries for small devices and for some reason it works on my phone but not on my computer when I resize to the small size, it used to work on the old version of the site but not anymore.
The second issue is very recent, in fact it's today; For some reason the website does not work on a different 'iPhone'.. My explanation is probably because it is a different iOS version? as that 'iPhone' is iOS10.3 and my phone is on iOS10.1.1
In conclusion, I just would like to add, should I change the library to Bootstrap or is W3.CSS good enough? Sorry if I come out as a bit naive but I am new to responsive design.
Homepage code example:
.main-div{ //main div is supposed to be the main content box
max-width: 75%;
width: 100%;
}
.sidebar-div{ //sidebar div is supposed to be the sidebar content box
max-width: 24%;
width: 100%;
}
/* responsive css */
/* mobile portrait&landscape */
@media screen and(max-width: 768px){
.main-div, .sidebar-div{
max-width: 100%;
}
}
