This example will put the navigation bar on the left if viewed on a desktop computer (What is that??) or a laptop computer, and the bar will be on the top if viewed on a small-screen device. View on your PC and on your smartphone to see how it works. There are probably easier ways of changing the style sheet to change in accordance with screen size, but this is the way I learned.
In the page, immediately after the html tag (<html>) and head tag (<head>) and before head-closing tag, (</head>), the a statement is included to instruct the browser to check the screen width: <meta name="viewport" content="width=device-width, initial-scale=1">. The browser will make this check when given a later instruction but will continue as if the statement had not been there until given the instruction.
The container1 or whatever desired name is defined as has been done in earlier examples; however, since the navigation area in this case will be on the side and occupy 15% of the body width for a wide-screen device, the container1 width cannot be more than 85% of the body width. On a wide-screen device in this example, container1 will be 70% of the body width, the lesser width mainly for appearance or easier reading.
The navigation area for the wide screen is defined as id navpc (#navpc), and its specifications are:
{top: 0; left: 0; width: 15%; height: 600px; position:fixed; /* top 0 and left 0 means the area will be at the upper left of the body area. Fixed position means the area will not move when other parts of the page are moved by the scroll bar. */
text-align: left; font-size: 20px; font-weight:bold; color: black;
line-height: 1.2; background-color: Khaki;} /* Nothing unusual: the font is a bit larger than the 16 pixel default and is bold; the line-height is 1.2 to allow a bit more space between lines of text, and the color of the area is khaki. */
Just below #navpc is the style statement #navtop {display: none;}, which prevents #navtop from showing on a wide-screen device even if it is defined and styled.
Without further styling, a tablet and even a smart phone would allot 15% of the body width to the navigation area and 70% to the other content. This would work on a tablet although the content area could possibly be improved by using some the unoccupied space on the right. Viewing on a smart phone would suffer. An additional instruction to the browser begins to improve matters for shrinking screens.
@media screen and (max-width: 1000px)
This statement instructs the browser to check and determine if the screen width is less than 1000 pixels, which is true for most tablets viewed in portrait position. If so, the following style replaces that used for container1 on wider screens.
#container1 {margin:10px 50px 10px 15%; display: block; width: 82%; height: auto;
padding: 10px; font-size: 1em; }
The width for this narrower screen is 82% (It must be less than 85% since the navigation area is 15%.), and the font size has been reduced to 1 em.
The next important style change instructs the browser to determine if the screen width is less than 500 pixels. This includes most smart phones.
@media screen and (max-width: 500px)
If that condition is met, several changes are made.
#navpc {display: none;}
#navpc, which occupied 15% of the width on a wide-screen device is treated as if it were no longer present and takes no space.
#navtop {display: block; overflow: hidden; background-color: DodgerBlue; position: fixed; top: 2px; left: 0; width: 100%; height: 60px; z-index: 2;}
There are no new concepts here, but note carefully how #navtop differs from #navpc.
#container1 {margin: 60px 0 10px 0; display: block; width: auto; height: auto; padding: 20px; font-size: 1em;}
Changes are made from the styling for of container1 for devices with screens wider than 500 pixels to devices to devices with narrower screens.Left and right margins are assigned zero values, and the top margin is 60 pixels to be sure the area is below the navigation area at the top. The width is set to auto so that container1 uses all the device's width.