Content 2 Area
HTML 5 <main> element
When viewed on a smart phone the navigation will display vertically to fit the small device. When viewed on a tablet or desktop, the navigation will display horizontally.
Test this live by resizing your browser window or rotate your cell phone from portrait to landscape.
This page uses media queries to change the width and float values of <main>, <section>, and <aside> for each media device.
This media query is different because it starts the CSS code for wide screens, then adds code for each smaller device using a max-width media query. Example:
@media screen and (max-width: 1000px) {
aside {width:220px; padding:5px 15px; float:right;...
For smaller media devices:
aside {width:auto; clear:both; padding: 1% 4%; float:none;}
It is very common to start the CSS code for smartphone devices, then add in order media queries for each larger device using min-width. Example:
@media only screen and (min-width:600px){then@media only screen and (min-width:1000px){
See https://codepen.io/Cheesetoast/pen/KFAaq for similar site with even columns same all same color. It looks classy.
Try to use percents instead of pixels for elments. Below is media
query code
for wide screen, side by side:
@media only screen and (min-width:1000px){
Note1: The box-sizing property above takes into consideration both padding and borders, making it easier to set percents. If the percents are not set correctly, the
main {float:right; box-sizing:border-box; width:75%}
aside {float:left; box-sizing:border-box; width:25%; padding-left:2%}
} /* close media 1000px */aside element with display under
main, instead of to the left to it.
Note2:
Below is code for smartphone screen, portrait, for stacked vertical display:
main {float:left; width:100%}
aside {float:left; width:100%; padding-left:2%}