HTML and CSS - Mobile Responsive Design
Tutorials nowadays just regurgitate the wrong information! Here’s the right way to do mobile responsive design. The key is to use a scale of 0.86 instead of 1. This way zooming in and out actually works!
From https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_width_and_screen_width
<meta name="viewport" content="width=device-width, initial-scale=0.86, minimum-scale=0.86">
Tutorials will recommend to style mobile first, but I usually create websites for the desktop view first.
/* This is optional. I use it for Tablet or 16:10 */
@media screen and (max-width:1280px) {
#desktop-nav>a {
float: left;
text-align: center;
margin-left: 5%;
}
}
/* This is the mobile view */
@media screen and (max-width:870px) {
#desktop-nav {
display: none
}
}