I find it highly unlikely that the footer sections would be at H3 depth for the headings. Just exactly which H2 on a page would they be marking the start of subsections of?
Remember, H3 marks the start of a subsection of the section started by an H2 preceding it. Just as H4 means the start of a subsection of the H3 preceding it, and H1 is THE(singular) head*ING* (singular) that everything on EVERY page of a website is a subsection of, and H2 marks the start of a major subsection of the current page. The first H2 indicating the start of the main content unless you use the MAIN tag.
They do not mean fonts in different weights and sizes.
It's also a bit of a wonk that you're using presentational classes. Since non-visual UA's likely won't even have rows and columns, and even visually when that media query kicks in you no longer have columns. Visual concepts like that have no business in your HTML, even as classes. This is why HTML/CSS frameworks are inherently incompetent trash!
Your media query and many of your values also have issues in that you're using EM/REM fonts. As a large font user on all my machines, 1REM !== 16px. My laptop it's 20, my workstation it's 24, my media center it's 32. When 1REM == 32px your 850px media query is too small, so it doesn't trigger soon enough.
PX in general are inaccessible trash, just begging to get you in trouble. It's called EM/REM, use 'em!
I also think that grid might be the wrong tool for the job here. You end up micro-managing a lot of values that flex-wrap could handle with more aplomb.
It's also wrong to just dump the semantically neutral anchor tag in all by its lonesome for a menu. Get your UL/LI in there.
I find it highly unlikely that the footer sections would be at H3 depth for the headings. Just exactly which H2 on a page would they be marking the start of subsections of?
Remember, H3 marks the start of a subsection of the section started by an H2 preceding it. Just as H4 means the start of a subsection of the H3 preceding it, and H1 is THE (singular) head*ING* (singular) that everything on EVERY page of a website is a subsection of, and H2 marks the start of a major subsection of the current page. The first H2 indicating the start of the main content unless you use the MAIN tag.
They do not mean fonts in different weights and sizes.
developer.mozilla.org/en-US/docs/W...
It's also a bit of a wonk that you're using presentational classes. Since non-visual UA's likely won't even have rows and columns, and even visually when that media query kicks in you no longer have columns. Visual concepts like that have no business in your HTML, even as classes. This is why HTML/CSS frameworks are inherently incompetent trash!
Your media query and many of your values also have issues in that you're using EM/REM fonts. As a large font user on all my machines, 1REM !== 16px. My laptop it's 20, my workstation it's 24, my media center it's 32. When 1REM == 32px your 850px media query is too small, so it doesn't trigger soon enough.
PX in general are inaccessible trash, just begging to get you in trouble. It's called EM/REM, use 'em!
I also think that grid might be the wrong tool for the job here. You end up micro-managing a lot of values that flex-wrap could handle with more aplomb.
It's also wrong to just dump the semantically neutral anchor tag in all by its lonesome for a menu. Get your UL/LI in there.
Check this pen rewrite I just belted out:
codepen.io/jason-knight/pen/poWpLz...
Which handles being responsive a bit better, and fixes all the issues I just outlined.
Thank you for guiding me